如何一個元素上應用多種模板綁定在angular2

我使用的模板類似以下內容：如何一個元素上應用多種模板綁定在angular2

<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"> 
"): [email protected]:94

Previously it was not giving error I faced this issue after upgrading to RC4.

So what's workaround, so I can apply multiple template binding on single element without altering Template structure.

來源

2016-07-26 Akhilesh Kumar

'ngIf'＆'ngFor'都是結構性的指令，他們不能有相同的元素。對於workaroud你可以檢查此[GitHub的問題COMENT（https：//開頭github上。 com/angular/angular/issues/7315＃issuecomment-232083676） –

但之前（RC1）它正在工作。 –

不能使用角2，如* ngIf和* ngFor）在一個元件上兩個模板結合（。但是你可以通過用span或任何其他元素包裝元素來達到同樣的效果。最好附加一個<ng-container>，因爲它是一個邏輯容器，它不會附加到DOM。例如，

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

來源

2017-05-08 11:42:46

此解決方案不能始終工作。例如兩個ng容器 – titusfx

把你的* 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>

來源

2016-07-26 09:17:51 Delosdos

但爲此，我必須改變模板結構和CSS（對應的選擇器）。沒有改變模板結構沒有任何其他解決方法。 –

是不是有類似於http://stackoverflow.com/questions/10700020/how-to-have-multiple-data-bind-attributes-on-one-element –

這是真的。如果它能幫助你的CSS，你可以將其定義爲一個跨度。甚至可以創建一個自定義元素：'

'例如 – Delosdos

如果使用* ngFor並希望添加* ngIf檢查一些領域，如果有條件的話是不是太複雜，我用的過濾器，凡我跑我的條件和返回僅在我那循環內部條件輸入項目..希望這有助於

類似的東西，我想只顯示與描述項目：

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

達沃爾

來源

2016-09-02 17:38:08 Davor

Angular 2沒有過濾方法。請參閱https://angular.io/docs/ts/latest/guide/pipes.html#!#no-filter-pipe。 – SoftwareAndOutsourcing

您可以使用以下（擴展版本）來保留文檔結構（例如，爲您的CSS選擇器）：

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

來源

2016-09-02 18:08:42 typesafe

如何一個元素上應用多種模板綁定在angular2

回答

相關問題