Angular2 ngIf creates empty element when false

angular, angular-ng-if, javascript, typescript

Solution

Try using `<ng-container>` for the `*ngFor`, and only include the `<tr>` when you are inside the first `*ngIf`

<ng-container *ngFor="let a of aufrufe | async; let odd = odd; let i = index" >
  <ng-container *ngIf="a.room != 'Beratungsplatz' && i > 7 ">
    <tr [@newsState]="anistate[a.appid]" (click)="switchState(a)">
      <ng-container *ngIf="odd">
        <td class="roomodd">{{a.room}}</td>
        <td class="ticketodd">{{a.ticket}}</td>
      </ng-container>
      <ng-container *ngIf="!odd">
        <td class="room">{{a.room}}</td>
        <td class="ticket">{{a.ticket}}</td>
      </ng-container>
    </tr>
  </ng-container>
</tr>

Problem

I have a problem with Anguar2 and ngIf: I have a code that creates a table from an array(with a DIY coded offset of 6): ``` <table class="table2"> <tr> <th>Raum</th> <th>Ticket</th> </tr> <tr *ngFor="let a of aufrufe | async; let odd = odd; let i = index" [@newsState]="anistate[a.appid]" (click)="switchState(a)"> <ng-container *ngIf="a.room != 'Beratungsplatz' && i > 7 "> <ng-container *ngIf="odd"> <td class="roomodd">{{a.room}}</td> <td class="ticketodd">{{a.ticket}}</td> </ng-container> <ng-container *ngIf="!odd"> <td class="room">{{a.room}}</td> <td class="ticket">{{a.ticket}}</td> </ng-container> </ng-container> </tr> </table> ``` The problem is, that angular creates an empty tr with this comment in it: ``` <tr _ngcontent-c1="" class=""> <!--bindings={ "ng-reflect-ng-if": "false" }--> </tr> ``` And that "destroys" my style. Shouldn't the ngIf in the first ng-container print nothing if it it false?(index > 7) Thank you in advance!

Original source