嵌套*ngFor*with*ngIf

Question

问题

在下面的代码中,我试图根据它们的类别显示它们的所有Projects(对象)Tab.

类别必须是等同的.

编辑:如果不清楚,请看这里.

这是我的代码:

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

我想要实现的目标:

我正在尝试迭代选项卡并将每个选项卡的名称添加到选项卡的"模板".

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

我

由于某种原因,它似乎不起作用.难道我做错了什么 ？
对不起,我的逻辑,过去两天都醒了!

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>

另请参阅*ngIf和*ngFor在同一元素上导致错误