Angular2 ngIf 在 false 时创建空元素答案

【问题标题】：Angular2 ngIf creates empty element when falseAngular2 ngIf 在 false 时创建空元素
【发布时间】：2017-05-11 11:42:56
【问题描述】：

我对 Anguar2 和 ngIf 有疑问：

我有一个从数组创建表的代码（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>

这“破坏”了我的风格。如果第一个 ng-container 中的 ngIf 为假，它不应该不打印吗？(index > 7)

提前谢谢你！

【问题讨论】：

只过滤控制器中的数组，然后绑定过滤后的数组，这样在标记中不需要任何条件，不是更简单更稳定吗？标记中的逻辑越少越好。我碰巧知道这是内部惯例。
那么你应该过滤aufrufe（在你的组件逻辑中）并且只返回你要显示的那些项目。
“创建一个空的 tr 并在其中包含此评论...这破坏了我的风格” 评论如何干扰样式？
@zeroflagL 我不知道为什么，但是 tr 有一个边距（在 CSS 中将它设置为 0 但它仍然存在）。但是现在已经修复了:)

标签： javascript angular typescript angular-ng-if

【解决方案1】：

尝试将<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>

【讨论】：

【解决方案2】：

用模板试试

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

【讨论】：

【解决方案3】：

显而易见的答案是将*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>
...

【讨论】：

我也会尝试，其他答案也有效，我会选择最好的:)