嵌套 *ngFor* 和 *ngIf [重复]

Posted 2023-03-05

【中文标题】嵌套 *ngFor* 和 *ngIf [重复]

【英文标题】：Nested *ngFor* with *ngIf [duplicate]

【发布时间】：2017-05-23 21:18:24

【问题描述】：

问题

在下面的代码中，我试图根据它们的类别显示Tab 下的所有Projects（对象）。

类别必须相同。

编辑：如果不清楚，请查看here。

这是我的代码：

<md-tab-group>
    <md-tab *ngFor="let tab of tabs">

        <template md-tab-label>
            tab.name
        </template>

        <h1 *ngFor="let project of projects" *ngIf="tab.category == project.category">
            Project Name: project.name
        </h1>

    </md-tab>
</md-tab-group>

我想要达到的目标：

我正在尝试遍历选项卡并将每个选项卡的名称添加到选项卡的“模板”中。

然后，我正在尝试遍历项目，如果项目的类别与选项卡的类别匹配，那么它将显示在选项卡下。

我

由于某种原因，它似乎不起作用。我做错了吗？ 对不起，我的逻辑，过去 2 天一直醒着！

【问题讨论】：

category 上的大小写是否匹配？还是他们的数值

它不起作用，因为在同一个指令中不能有 2 个带星号的结构指令。

我猜你在找这个：***.com/questions/34164413/…

糟糕，应该使用===，因为它们都是字符串。

【参考方案1】：

不支持在一个元素上使用*ngIf 和*ngFor（或通常多个结构指令）。

您可以使用辅助元素 <ng-container> 将 *ngIf 和 *ngFor 应用于两个不同的元素，而无需将另一个元素添加到 DOM 中

<ng-container *ngFor="let project of projects">
  <h1 *ngIf="tab.category == project.category">
      Project Name: project.name
  </h1>
</ng-container>

另见*ngIf and *ngFor on same element causing error

【讨论】：

谢谢，这就是我要找的。我有点怀疑是这个原因。编辑：我会在 6 分钟内接受你的回答。