всегда выполнять функцию ngFor заканчивает отображение данных - PullRequest
Новая
       8

всегда выполнять функцию ngFor заканчивает отображение данных

1 голос
/ 03 октября 2019

Я пытаюсь вызывать функцию каждый раз, когда мой 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>

TS 

this.ngForIsFinished = true;

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

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

Ответивший сказал, что вам просто нужно установить ngForIsFinished вернуться к true, но мне трудно установить его в моем коде.

Ответы [ 2 ]

0 голосов
/ 04 октября 2019

Вот пример:

Компонент: 

    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

0 голосов
/ 03 октября 2019

Попробуйте использовать ChangeDetectionStrategy.OnPush и last переменную ngFor. Поскольку ChangeDetectionStrategy.Default всегда проверяет методы, поэтому fooMethod(...) будет вызываться из нескольких элементов: 

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

yourComponent.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}`);
  }
}

ОБНОВЛЕНИЕ:

После того, как выЗагрузив данные, вы должны вызвать метод среза, так как стратегия обнаружения изменений Angular 2 не проверяет содержимое массивов или объектов. Поэтому попробуйте создать копию массива после мутации: 

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

ИЛИ: 

constructor(private changeDetectorRef: ChangeDetectorRef)

И вы можете вызвать метод markForCheck, чтобы вызвать changeDetection: 

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