jquery - Angular 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()生命周期方法，该方法将在视图和内容按角度配置后调用。有关所有钩子的概述，请查看the docs。
最后，如果您的基本列表要发生任何更改，则需要将更改通知Flipster插件。我不确定这是否像再次调用$('...').flipster()一样简单，或者是否需要做其他事情来跟踪更改。Flipster文档似乎没有提到这个案例。

关于jquery - Angular 2:* ngFor导致CSS问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38568477/