angular2 一个元素上不能有多个模板绑定答案

【问题标题】：angular2 Can't have multiple template bindings on one elementangular2 一个元素上不能有多个模板绑定
【发布时间】：2019-08-07 11:27:46
【问题描述】：

我有这个 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 = [] 的情况。不然怎么解决？

【问题讨论】：

尝试使用 attr.type 而不是简单的类型

标签： javascript angular

【解决方案1】：

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

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

由于不同地方几乎相同的语法不同造成了相当的混乱，Angular 团队最近推出了

<ng-container>

其行为类似于 <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>

【讨论】：

这个空数组检查也将修复Can't bind to 'type' since it isn't a known property of 'alert' ?
仍然收到此错误：Can't bind to 'type' since it isn't a known property of 'alert'. (" <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
您可能缺少@NgModule({imports: [ModuleThatContainsAlert], declaration: [AlertComponent]) 中的导入或声明，具体取决于<alert> 的来源。错误消息表明没有为此元素实例化AlertComponent。
public alerts:Array<Object> = []; 是会员。我认为错误是因为数组一开始就为空。认为 *ngIf 应该解决这个问题
这是因为<alert [type]=xxx 因为<alert> 没有属性type。

【解决方案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>

【讨论】：