Можно ли использовать AsynPipe в * ngFor и обновить список наблюдаемых объектов

У меня есть список объектов, которые я получаю из HTTP-запроса GET.

http.get<Array<Item>>(url)

Я использую в своем шаблоне директиву * ngFor для отображения элементов. Поскольку я работаю напрямую с Observable, я использую asyncPipe. Таким образом, если я хорошо понимаю, мне не нужно использовать промежуточный список объектов, и мне не нужно вручную подписываться на результат HTTP-запроса GET.

<tr *ngFor="let item of itemList | async ">

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

Можно ли сделать это без использования промежуточного списка элементов и подписаться вручную?

Я пробовал что-то подобное, у меня почти такое поведение, как я ожидал, но без обновления моего шаблона:

ngOnInit() {

  this.itemList = this.itemService.getItemList().do(items => {

    let processingItem = items.filter(item => item.status == ItemStatus.InProcess);

    if (processingItem.length > 0) {
      Observable.timer(5000).subscribe(() => this.itemList.subscribe());
    }
 });
}

Где getItemList () возвращает Observable ‹Array ‹Item>>


angular rxjs5 ngfor angular-pipe
person Yoann    schedule 16.04.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Предполагая, что ваши последовательные вызовы this.itemService.getItemList() будут фактически продолжать сокращать список, то есть каждый раз, возвращая новые результаты с отфильтрованными элементами, тогда вы можете использовать оператор .expand() для рекурсивного вызова:

this.itemList
    .expand(items => {
        let processingItem = items.filter(item => item.status == ItemStatus.InProcess);
        return processingItem > 0 ? this.itemService.getItemList().delay(5000) : Observable.empty();
    })

Вышеупомянутый вызов продолжает повторять вызов this.itemService.getitemList() и задерживать его на 5000 мс, пока условие processingItem не станет 0. Когда это происходит, он возвращает пустой Observable, который фактически завершает поток. Вам не нужна подписка вручную, канал async сделает всю работу за вас.

person CozyAzure    schedule 19.04.2018