*Angular 5中元素上的ngFor和*ngIf

Question

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

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

但是我只想在满足某些条件的情况下显示该行。我知道我不能一起使用*ngFor和*ngIF，但我不知道如何绕过这个问题。

我看到一篇文章说使用[ngIF]构造在tr中添加一个模板，但这似乎不再是有效的语法。如果我这样尝试：

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

然后我得到运行时错误。

应用组件。html:14错误错误：StaticInjectorError（AppModule）[NgIf-

Answer 1

ng容器将代替模板工作

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

Answer 2

创建一个返回已过滤的属性元素的 getter。类似的东西

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