每次 ngFor 完成显示数据时执行一个函数答案

【问题标题】：execute a function evertime ngFor is finished displaying data每次 ngFor 完成显示数据时执行一个函数
【发布时间】：2020-02-01 14:23:38
【问题描述】：

每次我的 ngFor 完成从我的 API 加载数据时，我都会尝试调用一个函数。

但回调仅在首次加载 ngFor 时触发。

如何在每次更改我的 ngFor 时执行回调；

我使用了这个答案：https://stackoverflow.com/a/38214091/6647448

这是我目前所拥有的......

HTML

<button class="btn" (click)="changeDate()"></button>

<div *ngFor="item of items; let last = last">
    <div>{{item}}{{last ? ngForAfterInit() : ''}}</div>
</div>

this.ngForIsFinished = true;

ngForAfterInit() {
    if (this.ngForIsFinished) {
        this.ngForIsFinished = false;
    }
}

changeDate() {
    // this is where i trigger my ngFor to change its content
}

回答的人说您只需将ngForIsFinished 设置回true，但我很难在我的代码中设置它。

【问题讨论】：

您的用例到底是什么？通过知道ngFor 何时重新呈现，您希望实现什么目标？
如果 ngFor 被重新渲染，回调函数 ngForAfterInit 将被执行
显示完整changeDate()
@AdritaSharma 我的 API 上的 changeDate() 请求以获取要显示的数据
@AdritaSharma changeDate() 是在我的 API 上发出另一个请求并显示在我的 ngFor 上的函数。

标签： javascript angular ngfor

【解决方案1】：

尝试使用ngFor 的ChangeDetectionStrategy.OnPush 和last 变量。因为ChangeDetectionStrategy.Default总是检查方法，所以fooMethod(...)会被调用多个项目：

<div *ngFor = "let title of iterated; let i=index; let last=last">
  {{last ? fooMethod(last) : '' }}  
</div>

你的组件.ts：

import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent  {
  name = 'Angular 4';

  iteratedData = [
      {"title":"test1","description":"foo","name":"name1"}, 
      {"title":"test2","description":"foo","name":"name2"}, 
      {"title":"test3","description":"foo","name":"name3"}, 
      {"title":"test4","description":"foo","name":"name4"}
  ];

  fooMethod(v) {
    if (v)
      console.log(`This is from the method ${v}`);
  }
}

更新：

加载数据后，您应该调用 slice 方法，因为 Angular 2 更改检测策略不会检查数组或对象的内容。所以尝试在突变后创建数组的副本：

this.iteratedData.push(newItem);
this.iteratedData = this.iteratedData.slice();

或者：

constructor(private changeDetectorRef: ChangeDetectorRef)

你可以调用方法markForCheck来触发changeDetection：

this.iteratedData.push(newItem);
this.changeDetectorRef.markForCheck();

【讨论】：

实现 changeDetection 时 ngFor 未加载

【解决方案2】：

示例如下：

组件：

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

        @Component({
          selector: 'my-app',
          templateUrl: './app.component.html',
          styleUrls: [ './app.component.css' ]
        })
        export class AppComponent  {
          name = 'Angular 5';
          data:any = [];

          ngAfterViewInit(){
            this.changeDate();

          }

          ngForAfterInit(valuue) {
            alert('FOR LOOP COMPLETED : '+ valuue);
           }


           ChangeDate(){
              let i = 0;
              setInterval(()=>{
                this.data=[];
                for(var j=0; j<10; j++){
                 this.data.push("TEST DATA "+ j+" SET AT :  "+i);
               };
               i+=1;
            },7000);
          }
       }

html:

<div *ngFor="let item of data; let last=last;">
{{item}} {{last? ngForAfterInit(item) :''}}
</div>

SetInterval 就像你的 API 将分配数据。这对我有用

https://stackblitz.com/edit/pokemon-app-4n2shk

【讨论】：