在模板中绑定时找不到 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">

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

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

    </article>

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

</ng-container>

Answer 2

很高兴给出的答案已经有帮助。

我想在这里回答你的评论，只是为了补充这个答案。

你问：现在是什么导致了这种情况发生？

现在发生的事情是这样的：

您的方法showData()调用可观察对象本身的订阅并将其解包。这应该具有您的界面的结构。该接口具有 items 属性。

模板中的异步管道

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

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

</article>

在另一个站点上并不针对可观察本身，而是针对 items 属性。这在这里还不存在，而且它也不是异步可以处理的有效可观察值。

Angular 的异步管道的工作方式与 showData() 中的订阅类似。它获取可观察对象中包装的所有内容并使其可用于处理。

@Garth Mason 在他的回答中所做的是首先对可观察对象调用 async 以“解开”它，并使用别名来给它一个正确的名称（不带 $）。展开的对象包含您正在查找的项目，现在可以通过 ngfor 对其进行迭代。

再次他的代码以供更好的参考：

<ng-container *ngIf="productIndexState$ | async as productIndexState">

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

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

    </article>

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

</ng-container>

只是对包装您的标签的 ng-container 的附加评论。Angular 只允许在标签上使用单个指令，例如 ngFor 或 ngIf。因此，每当您需要在模板中执行两个“Angular 流程步骤”时，您都需要执行第一步（此处的 ng-container），然后执行第二步的实际标签 () 。ng-container 没有标记，因此在 HTML 中不可见。这就是为什么包装此类处理步骤是完美的;-)