Can't use ngIf and ngFor in same template correctly. Angular2

Question

    <ng-container *ngIf="selectedPlayer; else infoText">
      <div *ngFor="let playerEL of players">
          [playersTEST]="playerEL"
          (playerWasSelected)="onPlayerSelected(playerEL)">
      </div>

    </ng-container>

  </app-stats>

What is the correct way of doing this?

What is your problem exactly ? (like an error message), because there a several strange things in your code — HMarteau, Mar 07 '18 at 13:11
Can't bind to 'playersTEST' since it isn't a known property of 'div'. — Andrew Laurenson, Mar 07 '18 at 13:20
can you past the code of the directive with the playersTEST input? — Pierre Mallet, Mar 07 '18 at 13:21
Are you using a playerTEST directive ? What is your goal with this code ? — HMarteau, Mar 07 '18 at 13:26

score 3 · Answer 1 · answered Mar 07 '18 at 13:54

Little Typo in your code. You need to reformat your DIV code correctly as given below

<div *ngFor="let playerEL of players"
          [playersTEST]="playerEL"
          (playerWasSelected)="onPlayerSelected(playerEL)">
      </div>

and then implement your IF ELSE as suggested by @windmaomao.

score 2 · Answer 2 · answered Mar 07 '18 at 13:27

2

They do have some conflicts in Angular2+. Angular2 doesn't support more than one structural directive on the same element. So you can split them into two elements.

<ng-container *ngIf="selectedPlayer else infoText">
    <div *ngFor="let playerEL of players"></div>
</ng-container>
<ng-container #infoText>
    No records.
</ng-container>

ng-container can avoid create extra div, otherwise you can use ng-template.

answered Mar 07 '18 at 13:27

windmaomao

7,120
2
32
36

3

He doesn't have more than one structural directive on one element. – Günter Zöchbauer Mar 07 '18 at 13:59
You are right, I didn't answer directly to his answer. But I kinda know where he's heading towards :) – windmaomao Mar 07 '18 at 15:30
He's only kinda heading towards a redundant `>` at `players">` ;-) – Günter Zöchbauer Mar 07 '18 at 15:32
Yeah, that's true, i understand better now, that might be too much. – windmaomao Mar 07 '18 at 16:30

score -1 · Answer 3 · answered Mar 07 '18 at 13:57

-1

It looks like your directive hadn't been instantiated or recognized. Check the directive selector or if you add it in the module, or if you add the directive's module to the component module.

answered Mar 07 '18 at 13:57

OPulido

309
2
10

Can't use ngIf and ngFor in same template correctly. Angular2

3 Answers3