Блог

Существует компонент:

<my-component></my-component>

этот компонент получает поток чисел в виде @Input

<my-component [data]="numbers$ | async"></my-component>

внутри компонента мы обновляем модель:

 @Component({...})
class MyComponent {

  numbers: number[] = [];

  @Input
  set data(numbers: number[]) {
      this.numbers = numbers;
  }

  constructor() {}

  myCallback() { }
}
  

затем отобразите список чисел следующим образом:

 <ul>
 <li *ngFor="number of numbers">{{number}}</li>
</ul>
  

Как определить, что *ngFor отрисовало все элементы? И как вызвать функцию обратного вызова myCallback после добавления элементов в DOM?

Вы можете использовать ViewChildren для получения списка запросов элементов или директив из view DOM. Каждый раз, когда дочерний элемент добавляется, удаляется или перемещается, список запросов будет обновляться, и изменения, наблюдаемые в списке запросов, будут выдавать новое значение.

 import { Component, OnInit, Input, ViewChildren, QueryList } from '@angular/core';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent {

  numbers: number[] = [];
  @ViewChildren('li') elements: QueryList<any>;

  @Input() set data(numbers: number[]) {
    this.numbers = numbers;
  }

  ngAfterViewInit() {
    this.elements.changes.subscribe(li => {
      li.forEach(elm => this.myCallback(elm.nativeElement))
    })
  }

  myCallback(elm) {
    console.log(elm)
  }

}
  

шаблон

 <ul>
    <li #li *ngFor="let n of numbers">
        {{n}}
    </li>
</ul>
  

MyCallback будет регистрировать каждый элемент, но у вас по-прежнему будет доступ ко всем элементам li

демонстрация stackblitz 🚀🚀

Просмотр дочерних элементов

Вы можете создать директиву для обнаружения elemntmrender в dom и запустить метод в это время

 import { Directive , Output ,EventEmitter } from '@angular/core';

@Directive({
  selector: '[rendered]'
})
export class RenderedDirective {

   @Output() rendered:EventEmitter<any> = new EventEmitter();

   ngAfterViewInit() {
     this.rendered.emit()
   }

}
  

ngAfterViewInit будет вызван после того, как Angular полностью инициализирует a и отобразит li elemnt

MyComponent

 export class MyComponentComponent {

  numbers: number[] = [];

  @Input() set data(numbers: number[]) {
    this.numbers = numbers;
  }

  myCallback(elm) {
    console.log(elm)
  }

}
  

шаблон

 <ul>
    <li #li *ngFor="let n of numbers" (rendered)="myCallback(li)">
        {{n}}
    </li>
</ul>
  

демонстрация stackblitz 🔥🔥

это происходит в ngInit

https://angular.io/guide/lifecycle-hooks

ngOnInit()
Инициализируйте директиву / компонент после того, как Angular впервые отобразит свойства, связанные с данными, и установит входные свойства директивы / компонента.

Вызывается один раз, после первого ngOnChanges().

Обновить:

Я, вероятно, неправильно понял ваш вопрос. У вас нет никаких обновлений для ngFor. Каков ваш вариант использования? Возможно, для этого есть разные решения.