Доступ к результату асинхронного канала в шаблоне из кода компонента в Angular 2

В Angular 2 у меня есть компонент с шаблоном.

В компонентном коде TypeScript я создаю Reactive Extensions Observable (items$) и использую его в директиве ngFor в шаблоне с асинхронным каналом.

Таким образом, мне не нужно беспокоиться о подписке и отмене подписки.

<div *ngFor="let item of items$ | async"></div>
...
</div>

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


angular observable rxjs angular2-template angular2-pipe
person lox    schedule 12.09.2017    source источник
comment
Я думаю, что сейчас это невозможно... вам придется делать подписки на .ts и сохранять результат в переменной...   -  person Llorenç Pujol Ferriol    schedule 12.09.2017

Ответы (2)


arrow_upward
7
arrow_downward

Вы можете просто сделать это в компоненте:

items$.pipe(tap(items => this.items = items);

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

person Pizzicato    schedule 25.07.2019

arrow_upward
1
arrow_downward

Начиная с Angular 4+ вы можете использовать специальный синтаксис с as (работает и для *ngIf):

<div *ngFor="let item of items$ | async as items"></div>
  {{ items.length }} ...
</div>

См. пример здесь https://angular.io/api/common/NgForOf.

person martin    schedule 12.09.2017
comment
Да, но мне нужна ссылка на весь список элементов, и я хотел бы получить к нему доступ в коде компонента (ts-файле) - person lox; 12.09.2017
comment
Тогда нет, вам нужно будет сделать подписку в компоненте. - person martin; 12.09.2017
comment
На самом деле вы можете: проверить это stackoverflow.com/a/57199847/651555 - person Pizzicato; 25.07.2019