代码之家 › 专栏 › 技术社区 › Gargoyle

角度5中<tr>元素上的ngFor和ngIf

angular-ng-if ngfor angular5

Gargoyle · 技术社区 · 7 年前

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

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

但我只想在满足某些条件的情况下显示行。我知道我不能用 *ngFor 和 *ngIf 但我不知道该怎么处理这件事。

我看到一篇帖子说在tr中添加一个模板 [ngIf] 但这似乎不再是有效的语法。如果我这样尝试:

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

然后我得到运行时错误。

AppComponent。html:14错误错误:StaticInjectorError(AppModule)[NgIf->TemplateRef]:
StaticInjectorError(平台:核心)[NgIf->TemplateRef]:
NullInjectorError:没有TemplateRef的提供程序!

2 回复 | 直到 7 年前

gmazzotti 7 年前

创建一个getter,返回已筛选的属性元素。类似于

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

Mark Rotteveel 6 年前

ng容器可以代替模板工作

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

推荐文章

JennyToy · 如何向ngfor中的元素添加id以及在ngfor中有条件地创建元素

6 年前

PatS · 在Angular中,*ngFor=“let item from list | async”是什么意思?

6 年前

Robin · 使用方法调用而不是ngFor指令的属性时的无限负载

7 年前

Mka24 · Angular5-使用*ngFor构建表格

7 年前

FrankTheTank · ngFor内部无可见内容

7 年前

Gargoyle · *角度5中<tr>元素上的ngFor和*ngIf

7 年前

match · 将ngFor变量传递给ngIf模板

7 年前

louisvno · 使用ngFor更改阵列后未更新DOM

7 年前

Christophe Loeys · 根据API调用的数据,在Angular2中动态创建组件

7 年前

ste92 · 从Web服务器填充ngFor表时出错

7 年前