Бесконечный цикл при использовании * ngFor с асинхронным каналом в Angular - PullRequest
Новая
       16

Бесконечный цикл при использовании * ngFor с асинхронным каналом в Angular

0 голосов
/ 17 мая 2019

Моя проблема очень похожа на эту .

В foo.component.html: 

<ng-container *ngFor="let item of items">
    <ng-container *ngIf="(fooFunc(item.property) | async) as element">
        {{ element | json }}
    </ng-container>
</ng-container>

В foo.component.ts: 

fooFunc(foo: any) {
  return this.fooService.fooServiceFunc(foo).pipe(
    take(1),
    shareReplay(1)
  );
}

fooServiceFunc в fooService вернет только один Observable за один раз.

Моя проблема в том, что теперь мое приложение запускает бесконечные запросы (после того, как весь массив items будет повторен, он будет запускать запрос снова с начала, снова и снова), что является побочным эффектом async труба, которая объявлена ​​в этот ответ . Но я все еще не могу понять, как это исправить?

1 Ответ

2 голосов
/ 17 мая 2019

Сохраните ваш общий поток в переменную и используйте переменную в шаблоне 

data$ = forkJoin(
  this.items.map(item => this.fooService.fooServiceFunc(item.property).pipe(
    map(fetchResult => ({ fetchResult, item })
  ))
)

<ng-container *ngFor="let item of data$ | async">
    <ng-container *ngIf="item.fetchResults">
        {{ item.fetchResults | json }}
    </ng-container>
</ng-container>

Теперь вы создаете новый поток для каждого item, и каждый запрос запускает обнаружение изменений, а запрос запускается снова.

Мой совет: старайтесь избегать вызовов функций в шаблонах, функции в шаблоне выполняются при запуске changeDetection для текущих компонентов (обнаружение изменений выполнения AsyncPipe по каждому значению во входном потоке).

...