嵌套 *ngFor* 与 *ngIf

Question

问题

在下面的代码中，我试图在 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>

我想要达到的目标：

我正在尝试遍历选项卡并将每个选项卡的名称添加到选项卡的 "template"。

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

我

出于某种原因，它似乎不起作用。我做错了什么吗？
对不起，我的逻辑，这两天一直没睡！

Answer 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>

另见