Question

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

e.g。我有这个清单：

<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)
    );
}

我需要在＆＃39; start＆＃39;之间显示某种加载。并且“完成了”。我认为当记录完成后，一切都已完成，但事实并非如此。 * 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();，因为在完成的回调中调用console.log('done')后，Angular2会立即运行更改检测。

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

1 个答案: