Jak zastosować wiele powiązań szablonów na jednym elemencie w angular2

Question

używam szablonu jak następuje:

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

więc daje następujący błąd:

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 

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.

Answer 1

Nie można użyć dwóch szablon wiążące jednego elementu kątowego 2 (jak * i * ngFor ngIf). Ale można osiągnąć to samo, owijając element za pomocą przęsła lub innego elementu. Dobrze jest dołączyć do <ng-container>, ponieważ jest to logiczny kontener i nie zostanie dołączony do DOM. Na przykład,

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

Answer 2

Połóż * ngIf w div jednostki nadrzędnej, a * ngFor może pozostać tam, gdzie jest.

Na przykład:

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

Answer 3

Jeśli używasz * ngFor i chcesz dodać * ngIf sprawdzić pewne pole, jeśli warunkowa nie jest zbyt skomplikowane, używam filtrów na to, gdzie mogę uruchomić mój warunkowe i zwraca tylko te elementy, które wchodzą w moim stanie wewnątrz tej pętli .. mam nadzieję, że to pomaga

coś podobnego, gdzie chcę pokazać tylko te elementy wraz z opisem:

<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

Answer 4

Możesz użyć następujących (wersja rozszerzona), aby zachować strukturę dokumentu (np. dla selektorów 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>