为什么物化 css 和 *ngFor 的轮播不能动态协同工作以获取图像

Question

我正在尝试实现旋转木马的角码。轮播与动态数组相关联，但是当我将*ngFor 与轮播类一起使用时，它不起作用。

我尝试在 for 循环中编写 class="carousel-item"，但控制台显示：

无法读取未定义的属性“clientWidth”。

此代码不起作用：

模板：

<div class="carousel carousel-slider">
    <div class="carousel-item" href="#one!">
       <div *ngFor ="let item of items;let i = index">
           <img src={{items[i]}}>
        </div>
    </div>
</div>

组件：

options = {fullWidth: false};

constructor(private http: HttpClient) {
}

ngOnInit() {
    var elems = document.querySelectorAll('.carousel');
    var instances = M.Carousel.init(elems, this.options);
}

我也只得到一张图像，它被裁剪成两半，好像我删除了 for 循环并一个接一个地写 <div class="carousel-item">，例如：

<a class="carousel-item" href="#one!"><img src={{items[0]}}></a>
<a class="carousel-item" href="#two!"><img src={{items[1]}}></a>
<a class="carousel-item" href="#three!"><img src={{items[2]}}></a>

这样做，我让轮播开始工作，但它没有绑定到我想要的动态数组。

Answer 1

使用 AfterViewInit 生命周期钩子，而不是在 OnInit 中初始化轮播

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit {
  // ...

  constructor(private http: HttpClient) {}

  ngOnInit() {}

  ngAfterViewInit() {
    var elems = document.querySelectorAll('.carousel');
    var instances = M.Carousel.init(elems, this.options);
  }
}

另外像这样改变你的模板：

<div class="carousel">
    <a class="carousel-item" href="#{{hrefs[i]}}!" *ngFor="let item of items;let i = index">
        <img src={{item}}/>
    </a>
</div>

a-tag 上的*ngFor 将创建materialize 所需的结构。

使用当前元素的索引和一个名为“hrefs”的新数组，为每个 a-tag 单独设置 href 属性。

请查看此Stackblitz 以获取工作示例。

编辑：使用 API 响应

现在出现错误“无法读取未定义的属性'clientWidth'”（以及在 OnInit 内轮播初始化期间），因为在调用 M.Carousel.init (...) 时 HTML 结构尚未完成。只要this.items 未定义，就没有carousel-item 类的a-tags。

要解决此问题，必须延迟物化轮播的初始化，直到从服务器加载数据并且所有 a-tags 都由 *ngFor 添加到 DOM。

// removed code because it wasn't the best solution..
// it's still in the Stackblitz as comment

编辑#2

我刚刚意识到有一个更好的方法：不是在轮播初始化时设置超时，而是让*ngFor 在完成将最后一项添加到 DOM 后触发 init。为此，请像这样更改您的 html：

<div class="carousel">
    <a class="carousel-item" href="#{{hrefs[i]}}!" *ngFor="let item of items;let i = index; let last = last">
        <img src={{item}}/>
    <ng-container *ngIf="last">{{initCarousel()}}</ng-container>
  </a>
</div>

在您的组件中，您现在只需要以下内容：

// imports
// ...

export class AppComponent implements OnInit {
  // ...

  ngOnInit() {
    // dummy api request
    this.fakeApiRequest().pipe(delay(2000)).subscribe((res) => {
      // parse api response
      this.items = res;
    });
  }

  initCarousel() {
    // timeout needed, otherwise navigation won't work.
    setTimeout(() => {
       let elems = document.querySelectorAll('.carousel');
       let instances = M.Carousel.init(elems, this.options);
    }, 100);
  }

  fakeApiRequest(): Observable<string[]> {
    return of(["https://picsum.photos/200/300?image=0", "https://picsum.photos/200/300?image=1", "https://picsum.photos/200/300?image=2", "https://picsum.photos/200/300?image=3", "https://picsum.photos/200/300?image=4"]);
  }
}

调整后的Stackblitz。