嵌套* ngFor * with * ngIf

Question

问题

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

类别必须相同。

编辑：如果情况不明确，请查看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>

我想要实现的目标：

我试图迭代标签并将每个标签的名称添加到＆＃34;模板＆＃34;选项卡。

然后，我尝试迭代项目，如果项目的类别与标签的类别匹配，那么它将显示在标签下。

我

出于某种原因，它似乎无法奏效。我做错了吗？ 对不起，我的逻辑，过去两天一直保持清醒！

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 and *ngFor on same element causing error