来自@Input 的数据在功能上与模板中的不同

Question

我有一个容器，它将一个名为 positions$ 的 Observable 传递给一个组件，最终 returns 一个对象数组。当我将该数组绑定到模板时，它会按照我的预期显示数据，但是如果我尝试在同一个组件中的一个函数中访问相同的数据，它会返回以下内容：

在预期数据显示在模板中很久之后，它就会记录到控制台，因此我知道我没有过快地单击按钮。为什么我在这两个地方没有得到相同的数据？这是我的相关代码：

容器打字稿：

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>

Answer 1

您的工作模板正在使用异步管道显示 "postions"，因此 "positions" 似乎是一个 Observable。

在获取@Input 的组件中，您将输入键入为 Position[]，但我敢打赌您在运行时实际获取的是一个 Observable

如果是这样，组件将必须订阅 Observable 才能获取数据。

来自@Input 的数据在功能上与模板中的不同

Data from @Input different in function than in template

angular

ngrx

ngrx-store