jquery - 无法将 ngFor 应用于 jquery carousal

Question

我在我的 Angular 应用程序中使用jquery轮播，我面临一个问题，即轮播对于预定义数据工作正常，当我尝试显示时带有动态数据的轮播，我无法在轮播中显示动态数据。我不熟悉jquery。这个问题需要帮助。因为组件代码更多我给这个 Stackblitz Link 。

Answer 1

JQuery 正在尝试使用空 DOM 渲染轮播，而该 DOM 尚未由 Angular 渲染。

您必须将 JQuery 代码放入 ngAfterViewInit 中，而不是 ngOnInit 中。

app.component.ts

import { Component, AfterViewInit } from '@angular/core';

...

export class AppComponent implements AfterViewInit {
  ngAfterViewInit(){
    // Jquery code STARTS
    ...
  }
}

堆栈 Blitz :https://stackblitz.com/edit/owl-carousel-example-pn1kjg

注意

在 index.html 中链接 JavaScript 文件会导致无法在 Stackblitz 中自动重新加载，这不是一个好的做法。