angular 2 监听/检测来自 *ngFor 的 dom 渲染元素

Question

当 angular 2 完成渲染从 *ngFor 启动的 dom 元素时，有没有办法检测/监听事件/挂钩？

例如我有这个清单：

<ul>
  <li *ngFor="let item of items">
    <span>{{item.name}}</span>
    <img [src]="item.url">
  </li>
</ul>

项目最初是空的，在 http req 之后填充。完成：

items = [];

ngOnInit(): void {
  console.log('start')
  this.svc.getItems() // http service call
    .subscribe(
      items => {
        this.items = items;
        console.log('done');
      },
      err => this.handleError(err)
    );
}

我需要在“开始”和“完成”之间显示某种加载。我想当它被记录为“完成”时，一切都完成了，但事实并非如此。 *ngFor 渲染元素和获取图像需要一段时间。

那么有没有办法检测 *ngFor 完成并获取图像？

Answer 1

没有钩子。 *ngFor 也总是在 items 更改时更新。

您可以拨打detectChanges

constructor(private cdRef:ChangeDetectorRef) {}

ngOnInit(): void {
  console.log('start')
  this.svc.getItems() // http service call
    .subscribe(
      items => {
        this.items = items;
        console.log('done');
      },
      err => this.handleError(err),
      () => {
         this.cdRef.detectChanges();
         console.log('done')
      }
    );
}

据我所知，这会同步更新 DOM。

对于您的用例，您可以省略 this.cdRef.detectChanges();，因为 Angular2 将在完成回调中调用 console.log('done') 之后立即运行更改检测。