Nested ngFor with *ngIf

Question

Problem

In the following code, I'm trying to display all Projects ( Objects ) under the Tab they're meant to go based on their category.

Category has to be equivalent.

EDIT: If that's not clear, take a look here.

Here's my 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>

What I'm trying to achieve:

I'm trying to iterate through tabs and add each tab's name to the "template" of the tab.

Then, I'm trying to iterate through projects and if the project's category matches the tab's category, then it will be displayed under the tab.

Me

For some reason it doesn't seem to work. Am I doing something wrong ?
Excuse me and my logic, been awake for the past 2 days!

do the casings match on the `category`? or are they numeric values — ps2goat, Jan 09 '17 at 15:11
It doesn't work because you can't have 2 structural directives with asterisk in the same directive. — Jacques Cornat, Jan 09 '17 at 15:12
I guess you looking for this: http://stackoverflow.com/questions/34164413/how-to-apply-filters-to-ngfor — Sergey Moiseev, Jan 09 '17 at 15:13

score 17 · Accepted Answer · edited May 23 '17 at 10:31

17

*ngIf and *ngFor (or in general more than one structural directive) on one element is not supported.

You can use the helper element <ng-container> to apply *ngIf and *ngFor to two different elements without another element being added to the DOM

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

See also *ngIf and *ngFor on same element causing error

edited May 23 '17 at 10:31

Community

1
1

answered Jan 09 '17 at 15:11

Günter Zöchbauer

623,577
216
2,003
1,567

Thank you, that's what I was looking for. I kind of suspected that was the reason. EDIT: I will accept your answer in 6 mins. – johnchar Jan 09 '17 at 15:16

Nested *ngFor* with *ngIf

Problem

Here's my code:

What I'm trying to achieve:

Me

1 Answers1

Nested ngFor with *ngIf