Angular 2：* ng导致CSS问题

Question

我正在构建一个带有Coverflow效果的滑块，我使用了jquery-flipster插件。

我可以导入它并使它像演示一样工作，但是当我想用*ngFor指令动态地执行它时，结果只是一个没有封面效果的简单列表。

我制作了这样的工作版本：

<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是一个数组，我存储了所有图片网址（在JSON文件中）。

Answer 1

ngOnInit()方法在生命周期中过早地调用$('...').flipster()在生命周期的那个时刻，已经注入了组件的依赖关系，但是当你调用{{{}时，还没有生成DOM。 1}}它发出的查询将返回空，插件无法执行任何操作。

您应该使用flipster()生命周期方法，一旦通过angular配置了视图和内容，就会调用该方法。有关所有挂钩的概述，请查看the docs。

最后，如果您的基础列表将会发生变化，那么您需要通知flipster插件更改。我不确定这是否就像再次调用ngAfterViewInit()一样简单，或者是否还有其他事情要跟踪更改。这些流行文件似乎并没有提到这个案例。