Блог

Главная - Вопросы по программированию - Отображение вложенных данных из observable в представлении Angular 2

Отображение вложенных данных из observable в представлении Angular 2

#angular #rxjs #angular2-template #rxjs5

#angular #rxjs #angular2-шаблон #rxjs5

Вопрос:

Я использую службу состояния приложения на основе BehaviorSubject s в Rx, которая предоставляет Observables доступ к компонентам для работы. В одном из моих компонентов я хочу показать некоторые вложенные данные, если они присутствуют.

Это то, что я пытался

 <div>>{{  sharedState.loadedAccountDetails.accountId | async }}</div>

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

В моем компоненте общее состояние — это просто Observable , я не думаю, что есть что показать.

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

Ответ №1:

Вам нужно использовать async канал непосредственно для Observable, а не для значений, передаваемых из Observable. В вашем шаблоне используйте это вместо:

 <div>{{ (sharedState | async)?.loadedAccountDetails.accountId }}</div>

Со следующим компонентом:

 import { Component } from '@angular/core';
import { Observable, Subject } from 'rxjs';

@Component({
  selector: 'my-app',
  template: `
    I'm Loaded!
    <div>{{ (sharedState | async)?.loadedAccountDetails.accountId }}</div>
  `
})
export class AppComponent {

  sharedState: Observable = null;
  private subject = new Subject();

  constructor() {
    this.sharedState = this.subject.asObservable();
    setTimeout(_ => {
       this.subject.next({
         loadedAccountDetails: {
           accountId: 42
         }
       });
    }, 1000);
  }

}

Эта демонстрация показывает число 42 через одну секунду после создания компонента.

Смотрите живую демонстрацию: http://plnkr.co/edit/fGtNVOZWndYU22U4sRow

Комментарии:

1. Мне также пришлось использовать ? on loadedAccountDetails, чтобы избежать другой ошибки, но это сработало, спасибо.

2. Я думаю, мой вопрос кажется немного уродливым — есть ли лучший способ сделать это?

3. @Barry Я так не думаю, если вы хотите использовать async канал и сохранить все в шаблоне.