Angular2：一个元素不能有多个模板绑定。

Question

我有这个Angular2模板：

<template *ngIf="alerts.length > 0">
<alert *ngFor="let alert of alerts;let i = index" [type]="alert.type" dismissible="true" (close)="closeAlert(i)">
  {{ alert?.msg }}
</alert>
  </template>

我遇到了这些错误：

zone.js:461 Unhandled Promise rejection: Template parse errors:
Can't have multiple template bindings on one element. Use only one attribute named 'template' or prefixed with * (" </div>
  <div *ngSwitchCase="false" class="container p-t-10">
    <alert *ngIf="alerts.length > 0" [ERROR ->]*ngFor="let alert of alerts;let i = index" [type]="alert.type" dismissible="true" (close)="closeAlert"): b@5:37

当我将 *ngIf 和 *ngFor 放在不同的HTML元素中时，出现了什么问题？按理说这样应该可以正常工作，对吧？

还有：

Can't bind to 'type' since it isn't a known property of 'alert'. (""container p-t-10">
    <alert *ngIf="alerts.length > 0" *ngFor="let alert of alerts;let i = index" [ERROR ->][type]="alert.type" dismissible="true" (close)="closeAlert(i)">
      {{ alert?.msg }}
    </alert>
"): b@5:80

我添加了*ngIf="alerts.length > 0"以避免出现alert = []的情况。否则我该如何解决？

- Elad Benda2

---

尝试使用 attr.type 而不是简单的 type。 - Pardeep Jain

Answer 1

*ngFor 中的 * 让 Angular 添加一个 <template> 标签。在 <template> 标签上，这没有意义，因此在这里结构指令具有不同的语法。

<template ngFor [ngForOf]="alerts" let-alert let-i="index">

由于不同位置使用基本相同的语法却导致很多混淆，Angular团队最近引入了

<ng-container>

它的行为类似于<template>标签（不会添加到DOM中），但允许使用更常见的语法。

它的行为类似于<template>标签（不会添加到DOM中），但允许使用更常见的语法。

<ng-container *ngIf="alerts.length > 0">
  <alert *ngFor="let alert of alerts;let i = index" [type]="alert.type" dismissible="true" (close)="closeAlert(i)">
    {{ alert?.msg }}
  </alert>
</ng-container>

- Günter Zöchbauer

---

这个空数组检查也会修复 Can't bind to 'type' since it isn't a known property of 'alert' 吗？ - Elad Benda2

仍然出现以下错误：无法绑定到“类型”，因为它不是“警报”的已知属性。(" <ng-container *ngIf="alerts.length > 0"> <alert *ngFor="let alert of alerts;let i = index" [ERROR ->][type]="alert.type" dismissible="true" (close)="closeAlert(i)"> {{ alert?.msg }} </alert> "): b@6:54 - Elad Benda2

你可能在@NgModule({imports: [ModuleThatContainsAlert], declaration: [AlertComponent])}缺少了引入或声明，具体取决于<alert>的来源。错误信息表明此元素没有实例化AlertComponent。 - Günter Zöchbauer

这是因为 <alert> 没有 type 属性，所以出现了 <alert [type]=xxx。 - Günter Zöchbauer

属性不是动态添加的。属性默认情况下会被添加到HTML中，例如<input>元素的disabled或value属性，但这是一个固定的集合，或者当在元素上创建Angular2组件或指令时（@Input() type:string;）。如果不是这种情况，你可能是指一个属性而不是一个属性。在这种情况下，请使用<alert [attr.type]="xxx">。 - Günter Zöchbauer

Answer 2

在这种情况下，您应该使用<ng-container>。例如：

<ng-container *ngIf="totalItems > 0">
      <tr *ngFor="let item of outputs| paginate: { id:'ab', itemsPerPage: pageSize, currentPage: currentPage, totalItems: totalItems  }; let $index = index">
        <td>{{item.x}}</td>
        <td>{{item.y | date: 'MMMM d, y, h:mm:ss a' }}</td>
        <td>{{item.z}}</td>
        <td>{{item.r}}</td>

      </tr>
    </ng-container>
    <ng-container *ngIf="totalItems > 10">
      <tr *ngFor="let item of outputs| paginate: { id:'aabbbbbbbbb', itemsPerPage: pageSize, currentPage: currentPage, totalItems: totalItems  }; let $index = index">
            <td>{{item.x}}</td>
        <td>{{item.y | date: 'MMMM d, y, h:mm:ss a' }}</td>
        <td>{{item.z}}</td>
        <td>{{item.r}}</td>
      </tr>
    </ng-container>

- Abdus Salam Azad