当我使用异步管道时 *ngFor 和 *ngForOf 不起作用答案

【问题标题】：*ngFor and *ngForOf isn't work when I use async pipe当我使用异步管道时 *ngFor 和 *ngForOf 不起作用
【发布时间】：2021-04-10 19:12:30
【问题描述】：

我尝试将所有内容更改为 in 或仅更改 *ngFor，但它不起作用它表明了这个问题

我正在使用 NGRX Observable，并且在 STORE 开发工具上向我显示了值，但在我的组件上却没有

我该如何解决这个问题？

        <ul>
            <li *ngFor="let swimsuit of swimsuits$ | async">
                <div *ngForOf="let swimsuitItem of swimsuit">
                    {{swimsuitItem.shirt}}
                    {{swimsuitItem.pants}}
                    {{swimsuitItem.lower}}
                </div>
            </li>
        </ul>

错误

NG0303: Can't bind to 'ngForOfOf' since it isn't a known property of 'div'.

我使用该文档 https://angular.io/api/common/NgForOf

【问题讨论】：

标签： html angular angular11

【解决方案1】：

[NgForOf]是*ngFor内部使用的指令

<ng-template ngFor let-item [ngForOf]="swimsuits$ | async">
   <li>...</li>
</ng-template>

类似于：

<li *ngFor="let swimsuit of swimsuits$ | async">...</li>

在不知道数据结构的情况下，我假设可以简单地做：

<ul>
    <li *ngFor="let swimsuit of swimsuits$ | async">
        {{swimsuit.shirt}}
        {{swimsuit.pants}}
        {{swimsuit.lower}}
    </li>
</ul>

如果您在问题中添加示例 JSON 模型，我很乐意更新我的答案以进一步帮助您。

【讨论】：