Javascript Angular2 ngIf在为false时创建空元素

我对Anguar2和ngIf有问题：

我有一个从数组创建表的代码（DIY编码偏移量为6）：

劳姆
票
{{a.room}}
{{a.ticket}}
{{a.room}}
{{a.ticket}}

问题是angular创建了一个空tr，其中包含以下注释：

<tr _ngcontent-c1="" class="">
    <!--bindings={
       "ng-reflect-ng-if": "false"
    }-->
</tr>

这“破坏”了我的风格。如果第一个ng容器中的ngIf为false，那么它不应该打印任何内容吗？（索引>7）

---

提前谢谢你

显而易见的答案是将

*ngIf

和

*ngFor

放在

上，但这是不可能的

我的建议是制作一个管道，它将过滤所有属于条件

a.room！='BERAUNGSPLATZ'和&i>7

。这样，您将只打印需要存在的元素

例如：

管道

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'rooms'
})

export class RoomsFilter implements PipeTransform {
    transform(value: any, roomName: string, index: number, allowedValue: number ): any {
        return room != roomName && index > allowedValue ;
    }
}

Html

...
<tr *ngFor="let a of aufrufe | async | rooms: a.room: 'Beratungsplatz': i : 7; let odd = odd; let i = index" [@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>
...

。。。
{{a.room}}
{{a.ticket}}
{{a.room}}
{{a.ticket}}
...

尝试对

*ngFor

使用

，并且仅当您在第一个

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

{{a.room}}
{{a.ticket}}
{{a.room}}
{{a.ticket}}

尝试使用模板

<table class="table2">
  <tr>
    <th>Raum</th>
    <th>Ticket</th>
  </tr>
  <template ngFor let-a [ngForOf]="aufrufe | async" let-i=index [@newsState]="anistate[a.appid]" (click)="switchState(a)">
  <tr *ngIf="a.room != 'Beratungsplatz' && i > 7 ">
    <ng-container>
      <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>
 </template>
</table>

劳姆
票
{{a.room}}
{{a.ticket}}
{{a.room}}
{{a.ticket}}

只在控制器中过滤数组，然后绑定过滤后的数组，这样标记中就不需要任何条件，不是更简单、更稳定吗？标记中的逻辑越少越好。我碰巧知道这是内部实践。然后你应该过滤

aufrufe

（在你的组件逻辑中），只返回你要显示的项目。“创建一个包含此注释的空tr…这会破坏我的样式”注释如何干扰样式？@zeroplagl我不知道为什么，但是tr有一个边距（在CSS中将它设置为0，但它仍然存在）。但现在它已被修复：）我也会尝试，其他答案也有效，我会选择最好的：）

<table class="table2">
  <tr>
    <th>Raum</th>
    <th>Ticket</th>
  </tr>
  <template ngFor let-a [ngForOf]="aufrufe | async" let-i=index [@newsState]="anistate[a.appid]" (click)="switchState(a)">
  <tr *ngIf="a.room != 'Beratungsplatz' && i > 7 ">
    <ng-container>
      <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>
 </template>
</table>