Данные из @Input отличаются по функции от шаблона - PullRequest
Новая
       5

Данные из @Input отличаются по функции от шаблона

0 голосов
/ 13 января 2019

У меня есть контейнер, который передает Observable с именем positions$ компоненту, который в конечном итоге возвращает массив объектов. Когда я связываю этот массив с шаблоном, он отображает данные так, как я ожидал, но если я пытаюсь получить доступ к этим же данным в одной из моих функций в этом же компоненте, он возвращает следующее:

enter image description here

Это записывается в консоль задолго до того, как ожидаемые данные отображаются в шаблоне, поэтому я знаю, что нажимаю кнопку не слишком быстро. Почему я не получаю одинаковые данные в обоих местах? Вот мой соответствующий код:

машинописный текст контейнера: 

positions$: Observable<Position[]>;
...
this.positions$ = this.store.pipe(select(fromStore.getAllPositions));
this.store.pipe(select(fromStore.getPositionsLoaded)).subscribe(loaded => {
  if (!loaded) {
    this.store.dispatch(new fromStore.LoadPositions());
  }
});

html контейнера: 

<app-position-form
  [loading]="loading"
  [positions]="positions$"
  [positionsLoading]="positionsLoading$"
  (add)="addPosition($event)">
</app-position-form>

машинописный текст: 

@Input() positions: Position[];
...
addPosition() {
    // Does NOT work as expected
    console.log('existing positions', this.positions);
}

html компонента: 

<!-- Data displays correctly -->
<ul *ngIf="(positions | async)?.length">
  <li *ngFor="let position of (positions | async)">
    {{position.position}}
  </li>
</ul>

1 Ответ

0 голосов
/ 13 января 2019

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

В компоненте, который получает @Input, у вас есть ввод, напечатанный как Position [], но я бы поспорил, что то, что вы фактически получаете во время выполнения, является Observable

Если это так, компонент должен подписаться на Observable, чтобы получить данные.

...