@Input的数据功能与模板不同

Question

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

在模板中显示了预期的数据之后很长时间便将其记录到控制台，所以我知道我单击按钮的速度不是太快。为什么在两个地方都没有得到相同的数据？这是我的相关代码：

容器打字稿：

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

您正在使用的模板正在使用异步管道显示“位置”，因此“位置”似乎是可观察的。

在获取@Input的组件中，您将输入键入为Position []，但是我敢打赌，您在运行时实际得到的是可观察的

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