*ngFor 和 *ngIf 在 Angular 中的 <tr> 元素上 5

Question

在我的 Angular 5 应用程序中，我正在循环创建 tr 元素：

<tr *ngFor="let element of elements">

但我只想在满足特定条件时显示该行。我知道我不能同时使用 *ngFor 和 *ngIf，但我不知道如何解决这个问题。

我看到 post 说要在 tr 中添加一个带有 [ngIf] 结构的模板，但这似乎不再是有效的语法。如果我这样尝试：

<tr *ngFor="let element of elements">
    <template [ngIf]="element.checked || showUnchecked">

然后我收到运行时错误。

AppComponent.html:14 ERROR Error: StaticInjectorError(AppModule)[NgIf -> TemplateRef]:
StaticInjectorError(Platform: core)[NgIf -> TemplateRef]:
NullInjectorError: No provider for TemplateRef!

Answer 1

创建一个 getter，return 属性 个元素已经过滤。像

get filteredElements() {
    if( this.showUnchecked ) {
        return this.elements;
    } else {
        return this.elements.filter( () => { return this.checked; } );
    }
}

Answer 2

ng-container 可以替代模板

<table><tr *ngFor="let element of elements">
<ng-container *ngIf="element.checked || showUnchecked">
  <td></td>
  <td></td>
</ng-container>
</tr>
<table>