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

Question

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

例如我有这个列表:

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

items 最初是空的，在 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

没有 Hook 。 *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') 之后立即运行更改检测在完成的回调中调用。