Angular 2: обратный вызов после завершения ngFor

Вы можете использовать что-то вроде этого (ngFor локальных переменных) :

<li *ngFor="#item in Items; #last = last" [ready]="last ? false : true">

Затем вы можете Перехватить изменения входных свойств с сеттером

  @Input()
  set ready(isReady: boolean) {
    if (isReady) someCallbackMethod();
  }

Для этой цели можно использовать @ViewChildren

@Component({
  selector: 'my-app',
  template: `
    <ul *ngIf="!isHidden">
      <li #allTheseThings *ngFor="let i of items; let last = last">{{i}}</li>
    </ul>

    <br>

    <button (click)="items.push('another')">Add Another</button>

    <button (click)="isHidden = !isHidden">{{isHidden ? 'Show' :  'Hide'}}</button>
  `,
})
export class App {
  items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];

  @ViewChildren('allTheseThings') things: QueryList<any>;

  ngAfterViewInit() {
    this.things.changes.subscribe(t => {
      this.ngForRendred();
    })
  }

  ngForRendred() {
    console.log('NgFor is Rendered');
  }
}

исходный ответ здесь https://stackoverflow.com/a/37088348/5700401

У меня работает в Angular2 с использованием Typescript.

<li *ngFor="let item in Items; let last = last">
  ...
  <span *ngIf="last">{{ngForCallback()}}</span>
</li>

Тогда вы можете справиться с помощью этой функции

public ngForCallback() {
  ...
}

Решение довольно тривиальное. Если вам нужно знать, когда ngFor завершит печать всех элементов DOM в окне браузера, сделайте следующее:

1. Добавьте заполнитель

Добавьте заполнитель для печатаемого содержимого:

<div *ngIf="!contentPrinted">Rendering content...</div>

2. Добавьте контейнер

Создайте контейнер с display: none для содержимого. Когда все элементы напечатаны, сделайте display: block. contentPrinted - свойство флага компонента, значение по умолчанию - false:

<ul [class.visible]="contentPrinted"> ...items </ul>

3. Создайте метод обратного вызова.

Добавьте onContentPrinted() в компонент, который отключается после завершения ngFor:

onContentPrinted() { this.contentPrinted = true; this.changeDetector.detectChanges(); }

И не забывайте использовать ChangeDetectorRef, чтобы избежать ExpressionChangedAfterItHasBeenCheckedError.

4. Используйте значение ngFor last.

Объявить переменную last на ngFor. Используйте его внутри li для запуска метода, когда этот элемент является последним:

<li *ngFor="let item of items; let last = last"> ... <ng-container *ngIf="last && !contentPrinted"> {{ onContentPrinted() }} </ng-container> <li>

• Используйте свойство флага компонента contentPrinted, чтобы запускать onContentPrinted() только один раз.
• Используйте ng-container, чтобы не влиять на макет.

Вместо [ready] используйте [attr.ready], как показано ниже.

 <li *ngFor="#item in Items; #last = last" [attr.ready]="last ? false : true">

Я обнаружил, что в RC3 принятый ответ не работает. Однако я нашел способ справиться с этим. Мне нужно знать, когда ngFor завершил запуск MDL componentHandler для обновления компонентов.

Для начала вам понадобится директива.

upgradeComponents.directive.ts

import { Directive, ElementRef, Input } from '@angular/core';

declare var componentHandler : any;

@Directive({ selector: '[upgrade-components]' })
export class UpgradeComponentsDirective{

    @Input('upgrade-components')
    set upgradeComponents(upgrade : boolean){
        if(upgrade) componentHandler.upgradeAllRegistered();
    }
}

Затем импортируйте это в свой компонент и добавьте его в директивы

import {UpgradeComponentsDirective} from './upgradeComponents.directive';

@Component({
    templateUrl: 'templates/mytemplate.html',
    directives: [UpgradeComponentsDirective]
})

Теперь в HTML установите для атрибута "upgrade-components" значение true.

 <div *ngFor='let item of items;let last=last' [upgrade-components]="last ? true : false">

Если для этого атрибута установлено значение true, он будет запускать метод под объявлением @Input (). В моем случае он запускает componentHandler.upgradeAllRegistered (). Однако его можно использовать для чего угодно по вашему выбору. При привязке к «последнему» свойству оператора ngFor это будет выполняться по завершении.

Вам не нужно использовать [attr.upgrade-components], даже если это не собственный атрибут, так как теперь он является директивой bonafide.

Я пишу демо по этому вопросу. Теория основана на принятом ответе, но этот ответ не является полным, потому что li должен быть настраиваемым компонентом, который может принимать ready ввод.

Я пишу полную демонстрацию по этой проблеме.

Определите новый компонент:

импортировать {Component, Input, OnInit} из '@ angular / core';

@Component({
  selector: 'app-li-ready',
  templateUrl: './li-ready.component.html',
  styleUrls: ['./li-ready.component.css']
})
export class LiReadyComponent implements OnInit {

  items: string[] = [];

  @Input() item;
  constructor() { }

  ngOnInit(): void {
    console.log('LiReadyComponent');
  }

  @Input()
  set ready(isReady: boolean) {
    if (isReady) {
      console.log('===isReady!');
    }
  }
}

шаблон

{{item}}

использование в компоненте приложения

<app-li-ready *ngFor="let item of items;  let last1 = last;" [ready]="last1" [item]="item"></app-li-ready>

Вы увидите, что в журнале консоли будет напечатана вся строка элемента, а затем - isReady.

Я еще не изучал подробно, как ngFor визуализирует элементы под капотом. Но по наблюдениям я заметил, что он часто имеет тенденцию оценивать выражения более одного раза для каждого элемента, который он повторяет.

Это приводит к тому, что любой вызов метода машинописного текста, сделанный при проверке переменной ngFor 'last', иногда запускается более одного раза.

Чтобы гарантировать один вызов вашего метода машинописного текста с помощью ngFor, когда он правильно завершит итерацию по элементам, вам необходимо добавить небольшую защиту от многократной переоценки выражений, которую ngFor выполняет под капотом.

Вот один из способов сделать это (с помощью директивы), надеюсь, это поможет:

Код директивы

import { Directive, OnDestroy, Input, AfterViewInit } from '@angular/core';

@Directive({
  selector: '[callback]'
})
export class CallbackDirective implements AfterViewInit, OnDestroy {
  is_init:boolean = false;
  called:boolean = false;
  @Input('callback') callback:()=>any;

  constructor() { }

  ngAfterViewInit():void{
    this.is_init = true;
  }

  ngOnDestroy():void {
    this.is_init = false;
    this.called = false;
  }

  @Input('callback-condition') 
  set condition(value: any) {
      if (value==false || this.called) return;

      // in case callback-condition is set prior ngAfterViewInit is called
      if (!this.is_init) {
        setTimeout(()=>this.condition = value, 50);
        return;
      }

      if (this.callback) {
        this.callback();
        this.called = true;
      }
      else console.error("callback is null");

  }

}

После объявления указанной выше директивы в вашем модуле (если вы знаете, как это сделать, если нет, спросите, и я, надеюсь, обновлю это с помощью фрагмента кода), вот как использовать директиву с ngFor:

<li *ngFor="let item of some_list;let last = last;" [callback]="doSomething" [callback-condition]="last">{{item}}</li>

'doSomething' - это имя метода в вашем файле TypeScript, который вы хотите вызвать, когда ngFor завершает итерацию по элементам.

Примечание. «doSomething» не имеет здесь скобок «()», поскольку мы просто передаем ссылку на метод машинописного текста, а не вызываем его здесь.

И, наконец, вот как выглядит метод doSomething в вашем машинописном файле:

public doSomething=()=> {
    console.log("triggered from the directive's parent component when ngFor finishes iterating");
}