如何在 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=";显示:无"><li *ngIf="itsNotF && itsNotF.length" [ngClass]="{bgDFF: !colps[j],'list-group-item':true}" *ngFor="let valm1 of itsNotF;让 j = 索引；"(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 *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 *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>

<li [ngClass]="{bgDFF: !colps[j],'list-group-item':true,'lgOt':true}" (click)="logout()"><span class="title">注销<i class="fa fa-sign-out"></i></span>

所以它给出了以下错误:

例外:模板解析错误:一个元素上不能有多个模板绑定.仅使用一个名为模板"或以 * 为前缀的属性(one"><li *ngIf="itsNotF && itsNotF.length" [ngClass]="{bgDFF: !colps[j],'list-group-item':true}" [错误 ->]*ngFor=让 valm1 of itsNotF；让 j=index；"(click)="togFltr(j)" style="padding: 0;background: #fff">"): 应用@78:94

<块引用>

以前我在升级到 RC4 后遇到这个问题并没有给出错误.

那么有什么解决方法，这样我就可以在不改变模板结构的情况下在单个元素上应用多个模板绑定.

解决方案

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

<li *ngFor="let item of items">{{物品}}</ng-容器>

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.

解决方案

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