在模板中绑定时找不到 Observable 上的属性

Question

我正在从 NGXS 状态调用数据，当我console.log()显示该数据时，该数据以用于描述它的界面的形式存在。有一个items属性是由 3 个对象组成的数组，我想在模板中对其进行迭代。但是，当我定位该items属性时，我在 vsCode 中收到错误，告诉我该属性在该类型上不存在，并且屏幕上不会呈现任何内容。

我的状态模型看起来像这样

export interface CattegoryIndexItem{

    cattegory: string;

    products: ProductIndexListItem[];

}

export interface ProductIndexListModel{ items: CattegoryIndexItem[]; }

我的组件看起来像这样

export class ProductPageComponent implements OnInit {

  @Select() productIndexState$: Observable<ProductIndexListModel>;

  constructor(private store: Store) {}

  ngOnInit(): void {

    this.store.dispatch(new GetProductIndexList());

  }

  showData(){

    this.productIndexState$.subscribe(res => console.log(res));

  }

}

在我的模板内

<article *ngFor="let item of productIndexState$.items | async">

    <p>{{item.cattegory}}</p>

</article>

<button (click)="showData()">click</button>

当页面加载时我收到此错误

错误 TS2339：“Observable”类型上不存在属性“items”。

我在使用可观察量时从未遇到过这个问题，NGXS 是否做了一些事情让我们需要以不同的方式访问它？

Answer 1

看起来像模板语法中的一个小故障 - 无法调用.itemsObservable 本身，您想在该对象发出的对象上调用它Observable。所以你需要先Observable通过管道async，例如<ng-container *ngIf="productIndexState$ | async as productIndexState">&nbsp; &nbsp; <article *ngFor="let item of productIndexState.items">&nbsp; &nbsp; &nbsp; &nbsp; <p>{{item.cattegory}}</p>&nbsp; &nbsp; </article>&nbsp; &nbsp; <button (click)="showData()">click</button></ng-container>

Answer 2

很高兴给出的答案已经有帮助。我想在这里回答你的评论，只是为了补充这个答案。你问：现在是什么导致了这种情况发生？现在发生的事情是这样的：您的方法showData()调用可观察对象本身的订阅并将其解包。这应该具有您的界面的结构。该接口具有 items 属性。模板中的异步管道<article *ngFor="let item of productIndexState$.items | async">&nbsp; &nbsp; <p>{{item.cattegory}}</p></article>在另一个站点上并不针对可观察本身，而是针对 items 属性。这在这里还不存在，而且它也不是异步可以处理的有效可观察值。Angular 的异步管道的工作方式与 showData() 中的订阅类似。它获取可观察对象中包装的所有内容并使其可用于处理。@Garth Mason 在他的回答中所做的是首先对可观察对象调用 async 以“解开”它，并使用别名来给它一个正确的名称（不带 $）。展开的对象包含您正在查找的项目，现在可以通过 ngfor 对其进行迭代。再次他的代码以供更好的参考：<ng-container *ngIf="productIndexState$ | async as productIndexState">&nbsp; &nbsp; <article *ngFor="let item of productIndexState.items">&nbsp; &nbsp; &nbsp; &nbsp; <p>{{item.cattegory}}</p>&nbsp; &nbsp; </article>&nbsp; &nbsp; <button (click)="showData()">click</button></ng-container>只是对包装您的标签的 ng-container 的附加评论。Angular 只允许在标签上使用单个指令，例如 ngFor 或 ngIf。因此，每当您需要在模板中执行两个“Angular 流程步骤”时，您都需要执行第一步（此处的 ng-container），然后执行第二步的实际标签 () 。ng-container 没有标记，因此在 HTML 中不可见。这就是为什么包装此类处理步骤是完美的;-)