Angular 2：* ng導致CSS問題

Question

我正在構建一個帶有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是一個數組，我存儲了所有我的圖片網址（在JSON文件中）。

Answer 1

生命周期中的ngOnInit()方法太早，無法調用$('...').flipster()在生命周期的那個時刻，組件的依賴關系被注入，但是當你調用時沒有生成DOM flipster()它發出的查詢將返回空，插件無法執行任何操作。

您應該使用ngAfterViewInit()生命周期方法，該方法將在通過angular配置視圖和內容后調用。 有關所有掛鈎的概述，請查看文檔 。

最后，如果您的基礎列表將會發生變化，那么您需要通知flipster插件更改。 我不確定這是否就像再次調用$('...').flipster()一樣簡單，或者如果還有其他事情需要跟蹤更改。 這些流行文件似乎沒有提到這種情況。