Angular 来自@Input的数据在函数中与在模板中不同

我有一个容器，它将一个名为

positions$

的可观察对象传递给一个组件，该组件最终返回一个对象数组。当我将该数组绑定到模板时，它会像我预期的那样显示数据，但是如果我尝试在同一组件中的某个函数中访问相同的数据，它会返回以下结果：

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

容器类型脚本：

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());
  }
});

<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);
}

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

组件html:

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());
  }
});

<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);
}

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

{{position.position}

正在工作的模板正在使用异步管道显示“位置”，因此“位置”似乎是一个可观察的对象

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

如果是这样的话，组件将不得不订阅可观测数据以获取数据