我使用的模板如下:

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

那么解决方法是什么,这样我就可以在单个元素上应用多个模板绑定,而不必改变模板 struct .

推荐答案

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

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

Angular相关问答推荐

嵌套formArrays的HTML迭代

PrimeNG侧栏清除primeNG消息.为什么?

有Angular react 形式的输入用货币管

PathMatch full始终连接到参数化路径,即使完整路径不匹配也是如此

如何从URL中角下载图片?

截获火灾前调用公共接口

ANGLING HTTP.GET()返回包含数据的数组

使用`UrlHandlingStrategy`更改位置

Angular 组件存储,为什么我的效果可以';在http错误后不会被触发?

Angular将文件作为字符串读取给dxf解析器

无法在 app.component.html 中呈现自定义组件

NX MFE Angular 模块联合无法访问远程微前端

如何在 cypress 测试中实现拖放?

Angular 5 国际化

为什么 Angular2 routerLinkActive 将活动类设置为多个链接?

Angular 2 - 全局 CSS 文件

Angular 2 Material Design 组件是否支持布局指令?

Angular 2:将外部js文件导入组件

在 Angular 2 中使用逗号作为列表分隔符

如何在 Angular 4 中翻译 mat-paginator?