如何在angular的一个元素上应用多个模板绑定 [英] How to apply multiple template bindings on one element in angular

问题描述

我正在使用如下模板:

<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后我遇到了这个问题.

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.

推荐答案

不能在Angular 2中的一个元素上使用两个模板绑定(例如* ngIf和* ngFor).但是您可以通过使用span或任何其他元素包装元素来实现相同的目的.最好附加一个<ng-container>，因为它是一个逻辑容器，并且不会附加到DOM.例如，

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>

这篇关于如何在angular的一个元素上应用多个模板绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！