角度2：* ngFor会导致CSS问题
雷姆斯
我正在构建一个具有Coverflow效果的滑块，为此我使用了jquery-flipster插件。
我可以导入它并使它像演示一样工作，但是当我想使用*ngFor指令动态地进行操作时，结果只是一个没有Coverflow效果的简单列表。
我做了这样的工作版本：
<div id="coverflow">
<ul class="flip-items">
<li>
<img src="../../../img/text1.gif">
</li>
<li>
<img src="../../../img/text2.gif">
</li>
<li>
<img src="../../../img/text3.gif">
</li>
<li>
<img src="../../../img/text4.gif">
</li>
<li>
<img src="../../../img/text5.gif">
</li>
<li>
<img src="../../../img/text6.gif">
</li>
</ul>
</div>
但是有了*ngFor指令，我得到了：
代码 ：
<div id="coverflow">
<ul class="flip-items">
<li *ngFor="let tab of tabs">
<img [src]="tab.url">
</li>
</ul>
</div>
tabs 是一个数组，我在其中存储所有图片的url（在JSON文件中）。
步伐
该ngOnInit()方法在生命周期中为时过早，无法调用。$('...').flipster()此时，已经注入了组件的依赖项，但尚未生成DOM，因此，当您调用flipster()查询时，它的问题将返回空，并且插件无法执行任何操作。
您应该使用ngAfterViewInit()生命周期方法，一旦通过角度配置了视图和内容，该方法就会被调用。有关所有挂钩的概述，请参阅docs。
最后，如果您的基础列表将要全部更改，那么您将需要将更改通知到flipster插件。我不确定这是否像$('...').flipster()再次调用一样简单，或者是否有其他事情需要您跟踪更改。flipster文档似乎没有提到这种情况。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
角度2 * ngFor错误
- 2
角度2：ngIf问题
- 3
*ngFor 在角度 2 中失败
- 4
使用角度为8的无类型传单会导致问题
- 5
角度2中的数据未绑定问题
- 6
角度为2的电子有问题
- 7
角度2：导入无法找到模块的问题
- 8
使用arctan2进行梯度定向会导致角度翻转
- 9
角度2：使用[class.someClass]会导致`没有提供ControlContainer！`？
- 10
如何更改药丸的 CSS？（角度2）
- 11
多选设置会导致角度错误
- 12
在角度2的Ngfor上迭代一个json对象
- 13
“ * ngFor”背景颜色更改中的角度2“ ng-style”
- 14
Angular 2 * ngFor问题
- 15
添加select2的角度指令会破坏模型吗？
- 16
ng-include导致角度问题
- 17
ng-include导致角度问题
- 18
在preambel中使用knitr的注释中的变音符号会导致texi2dvi问题
- 19
Strut2具有多个软件包会导致问题
- 20
旧PS2键盘上洒水会导致系统崩溃，故障和BIOS问题吗？
- 21
Angular 2 AoT编译会导致应用程序问题并在JiT中正常运行
- 22
计算超过 2 个不同类的创建对象会导致问题
- 23
什么会导致间歇性的 EC2 > RDS 主机解析问题？
- 24
在角度 2 中将 json 值绑定到 html 的问题
- 25
Angular2 后退按钮问题 | 网址不变 | 角度通用
- 26
从角度2组件修改CSS关键帧
- 27
在角度2中分配条件CSS类
- 28
角度2：如何正确自动导入normalize.css
- 29
在角度2中分配条件CSS类
我来说两句