Локальная переменная в шаблоне для асинхронного канала (angular 2+)

В моем шаблоне есть что-то вроде...

<div> {{ (profile$ | async).username}}</div>
<div> {{ (profile$ | async).email}}</div>

Есть ли способ присвоить (профиль | async) локальную переменную? необходимость распечатывать его для каждого отдельного поля плохо для читаемости.

Спасибо.

ОТВЕТЫ

Ответ 1

Лучшим подходом было бы создание нового компонента, например. в этом случае app-profile и передать profile | async этому компоненту. Внутри компонента вы можете назвать переменную, что угодно.

<app-profile [profile]="profile | async"></app-profile>

Ответ 2

Так как Angular 4.0.0-rc.1 (2017-02-24), вы можете использовать расширенный синтаксис *ngIf. Это позволит вам назначить результат условия *ngIf в локальной переменной шаблона:

<div *ngIf="profile$ | async as profile">
    <div>{{profile.username}}</div>
    <div>{{profile.email}}</div>
</div>

Обновленная *ngIf документация идет более подробно и дает много хороших примеров, используя async и *ngIf вместе.

Обязательно также проверяйте инструкции then и else *ngIf.

Кори Ролан сделал короткое учебное пособие которое можно переварить через 5-10 минут.

Ответ 3

Это немного взломано, но я, кажется, много примеров, используя что-то вроде этого:

<template ngFor let-profile [ngForOf]="profile$ | async">
  <div> {{ profile.username }}</div>
  <div> {{ profile.avatar }}</div>
  <div> {{ profile.email }}</div>
  ...
</template>

Ответ 4

Есть альтернатива, но она более утомительна. Решение, которое подал Гюнтер Цохбауэр, смягчает этот факт.

Альтернативой было бы подписаться на наблюдаемое внутри компонента, а затем использовать переменную подписки в вашем шаблоне. Вы должны отменить подписку в событии OnDestroy, чтобы предотвратить утечку памяти. Асинхронная труба сделает это за вас. Вот почему принятое решение чище. Но если вы не хотите создавать новый компонент, это путь.