如何应用多个模板绑定在一个元素的角度

我使用的模板如下:

<ul [ngClass]="{dispN: !shwFilter,'list-group':true,'autoS':true,'dispB':shwFilter,'myshddw':true}" style=";display: none">
<li *ngIf="itsNotF && itsNotF.length" [ngClass]="{bgDFF: !colps[j],'list-group-item':true}" *ngFor="let valm1 of itsNotF;let j=index;" (click)="togFltr(j)" style="padding: 0;background: #fff">
<div *ngIf="valm1 && valm1.type=='1'">
<h5 style="padding:8px;margin: 0;">{{valm1['header']}}</h5>
<p style="margin: 8px;">{{valm1['body']}}</p>
<h6 style="padding:8px;margin: 0;">{{valm1['note']}}</h6>
</div>
<div *ngIf="valm1 && valm1.type=='2'" (click)="modlTxt=valm1;notREadVu(j)" data-toggle="modal" data-target="#myModal">
<h5 style="padding:8px;margin: 0;">{{valm1['header']}}</h5>
<h6 style="padding:8px;margin: 0;">{{valm1['note']}}</h6>
</div>
<div *ngIf="valm1 && valm1.type=='3'">
<h5 style="padding:8px;margin: 0;">{{valm1['header']}}</h5>
<p style="margin: 8px;">{{valm1['body']}}</p>
<h6 style="padding:8px;margin: 0;">{{valm1['note']}}</h6>
</div>
</li>
<li [ngClass]="{bgDFF: !colps[j],'list-group-item':true,'lgOt':true}" (click)="logout()">
<span class="title">Log Out <i class="fa fa-sign-out"></i></span>
</li>
</ul>

因此它给出了以下错误:

EXCEPTION: Template parse errors:
Can't have multiple template bindings on one element. Use only one attribute named 'template' or prefixed with * ("one">
<li *ngIf="itsNotF && itsNotF.length" [ngClass]="{bgDFF: !colps[j],'list-group-item':true}" [ERROR ->]*ngFor="let valm1 of itsNotF;let j=index;" (click)="togFltr(j)" style="padding: 0;background: #fff">
"): App@78:94

以前它没有给出错误，我面对这个问题后升级到 RC4。

那么什么是变通方法，这样我就可以在不改变 Template 结构的情况下对单个元素应用多个模板绑定。

113734 次浏览
小开

将 * ngIf 放在父 div 中，* ngFor 可以保持不变。

例如:

<div *ngIf="itsNotF && itsNotF.length">
<div [ngClass]="{bgDFF: !colps[j],'list-group-item':true}" *ngFor="let valm1 of itsNotF;let j=index;" (click)="togFltr(j)" style="padding: 0;background: #fff">
</div>
</div>
小开

如果您使用 * ngFor 并且想要添加 * ngIf 来检查某个字段，如果条件并不太复杂，那么我使用 filter 来检查该字段，其中运行条件并只返回在该循环中输入我的条件的项。.希望能有帮助

something like that where I want to show only items with description:

<div class="delivery-disclaimer" *ngFor="let payment of cart.restaurant.payment_method | filter:[{short_name: cart.payment_method}] | onlyDescription" text-wrap>
<ion-icon item-left name="information-circle"></ion-icon> \{\{payment.pivot.description}}
</div>

davor

小开

You can use the following (expanded version) to preserve the document structure (e.g. for your css selectors):

<template [ngIf]="itsNotF && itsNotF.length">
<div [ngClass]="{bgDFF: !colps[j],'list-group-item':true}" *ngFor="let valm1 of itsNotF;let j=index;" (click)="togFltr(j)" style="padding: 0;background: #fff">
</div>
</template>
小开
最佳答案

不能对角度2中的一个元素使用两个模板绑定(比如 * ngIf 和 * ngFor)。但是您可以通过使用 span 或任何其他元素包装元素来实现同样的目的。最好附加一个 <ng-container>，因为它是一个逻辑容器，不会被附加到 DOM。比如说,

<ng-container *ngIf="condition">
<li *ngFor="let item of items">
\{\{item}}
</li>
</ng-container>

提交答案