如何在ngFor之后检测DOM何时准备好? [英] How to detect when DOM ready after ngFor?

问题描述

我想为

元素设置动画(例如使用 jQuery).

I want to animate <li> elements (e.g. usign jQuery).

但是如何在 *ngFor 之后检测 DOM 何时完成?

But how can I detect when DOM is done after *ngFor?

查看

<ul #ul>
  <li *ngFor="let event of events">{{event|date:'medium'}}</li>
</ul>

<button (click)="showEvents()">Show events</button>

组件

export class AppComponent {

  @ViewChild('ul') ulRef: ElementRef;

  events: any[];

  showEvents(): void {

    // Assume this set of events will be different in every button click
    this.events = [
      new Date(2017, 1),
      new Date(2017, 3),
      new Date(2019, 6)
    ];

    const li = this.ulRef.nativeElement.children;

    // This logs empty array for first time or 
    // previous set of children for next times
    console.log( li );
  };

}

P.S. 我知道使用 setTimeout 可以解决这个问题，但这是正确的方法吗?

P.S. I know using setTimeout will solve this, but is it right approach?

解决方案

感谢@ThinkingMedia.在

和 QueryList 上使用模板变量，我可以观察变化.

Thanks to @ThinkingMedia. Using template variable on the <li> and QueryList I can watch for changes.

<ul>
  <li *ngFor="let event of events" #li>{{event|date:'medium'}}</li>
</ul>

  @ViewChildren('li') li: QueryList<ElementRef>; 

  ngAfterViewInit(): void {
    this.li.changes.subscribe(() => {
      const elements = this.li.toArray().map(i => i.nativeElement);
      // Here I can have access to the li elements when DOM updated
      console.log(elements);
    });
  }

推荐答案

您可以使用 AfterViewInit 生命周期钩子.

you can use the AfterViewInit life-cycle hook.

这个生命周期钩子在视图初始化后触发.

this life-cycle hook is trigger after the view is initialized.

你可以这样使用:

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

export class AppComponent implements AfterViewInit{

  @ViewChild('ul') ulRef: ElementRef;

  ngAfterViewInit() {
    // your logic
  }

  events: any[];

  showEvents(): void {

    this.events = [
      new Date(2017, 1),
      new Date(2017, 3),
      new Date(2019, 6)
    ];

    const li = this.ulRef.nativeElement.children;

    // This logs empty arrays since DOM not changed yet
    console.log( li );
  };

}

这篇关于如何在ngFor之后检测DOM何时准备好?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！