Angular2 ngIf 在 false 时创建空元素

Question

我对 Anguar2 和 ngIf 有疑问：

我有一个代码可以从一个数组中创建一个 table（DIY 编码偏移量为 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>

问题是，angular 创建了一个空的 tr，其中包含以下评论：

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

而且 "destroys" 我的风格。如果第一个 ng-container 中的 ngIf 为假，它不应该打印任何内容吗？(index > 7)

提前致谢！

Answer 1

显而易见的答案是将 *ngIf 和 *ngFor 放在 <tr> 上，但这是不可能的。

我的建议是制作管道来过滤所有符合条件 a.room != 'Beratungsplatz' && 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>
...

Answer 2

尝试将 <ng-container> 用于 *ngFor，并且仅在您位于第一个 *ngIf

中时包含 <tr>

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

Answer 3

尝试使用模板

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

Angular2 ngIf 在 false 时创建空元素

Angular2 ngIf creates empty element when false

javascript

typescript

angular-ng-if

angular