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

Question

在下面的代码中，我试图在< code >选项卡下显示所有< code >项目(对象)，它们应该基于它们的类别。

类别必须相等。

编辑：如果还不清楚，请看这里。

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

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

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

出于某种原因，它似乎不起作用。我做错什么了吗？< br >请原谅我和我的逻辑，过去两天一直醒着！

Answer 1

不支持在一个元素上使用< code>*ngIf和< code>*ngFor(或通常多个结构指令)。

您可以使用helper元素< code >

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

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