How to apply multiple template bindings on one element in angular2 [duplicate]

问题:

This question already has an answer here:

• *ngIf and *ngFor on <td></td> element [duplicate] 4 answers

I'm using template like following:

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

So it gives following error:

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.

回答1:

Can't use two template binding on one element in Angular 2 (like *ngIf and *ngFor). But you can achieve the same by wrapping the element with a span or any other element. It is good to append with an <ng-container> as it is a logical container and it will not get append to the DOM. For example,

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

回答2:

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> 

回答3:

Put your *ngIf in a parent div, and the *ngFor can stay where it is.

For example:

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

回答4:

If you are using *ngFor and want to add *ngIf to check some field, if conditional is not too complicated, I use filter for that, where I run my conditional and return only items that enter in my condition inside that loop.. Hope it helps

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

文章来源: How to apply multiple template bindings on one element in angular2 [duplicate]