Javascript angular2可以'；不能在一个元素上有多个模板绑定

我有一个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>

{{alert？.msg}

我发现以下错误：

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

zone.js:461未处理的承诺拒绝：模板分析错误：
一个元素上不能有多个模板绑定。仅使用一个名为“template”或前缀为*（“
]*ngFor=“让警报发出警报；让i=index”[type]=“警报。键入“dismissible=”true“（close）=“closeAlert”）：b@5:37

我把*ngIf和*ngFor放在不同的html元素中有什么问题吗？应该可以，不是吗

以及：

无法绑定到'type'，因为它不是'alert'的已知属性。（“container p-t-10”>
][type]=“警报。键入”dismissible=“true”（关闭）=“closeAlert（i）”>
{{alert？.msg}
"): b@5:80

我添加了

---

*ngIf=“alerts.length>0

以避免出现

警报=[]

的情况。否则我如何修复它？

ngFor中的

*

使添加

标记成为角度。在

标记上，这没有意义，因此这里的结构指令具有不同的语法

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

由于在不同的地方使用几乎相同的语法会造成相当大的混乱，Angular团队最近引入了

<ng-container>

其行为类似于

标记（未添加到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>

{{alert？.msg}

对于这种情况，您应该使用

。例如：

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

{{item.x}
{{item.y}日期：'MMMM d，y，h:mm:ss a'}
{{item.z}}
{{item.r}}
{{item.x}
{{item.y}日期：'MMMM d，y，h:mm:ss a'}
{{item.z}}
{{item.r}}

尝试使用

attr.type

而不是type simpleth此空数组检查还将修复

无法绑定到'type'，因为它不是'alert'的已知属性。

？仍然会出现此错误：

无法绑定到'type'，因为它不是'alert'的已知属性。（“][type]=”alert.type“dismissible=”true“（close）=“closeAlert（i）”>{{alert？.msg}”）：b@6：54

您可能在

@NgModule（{imports:[ModuleThatContainsAlert]，declaration:[AlertComponent]）中缺少导入或声明

取决于

的来源。错误消息表明没有为该元素实例化

警报组件。
公共警报：数组=[]；
是成员。我认为错误是因为数组在开始时是空的。我认为*ngIf应该修复它，因为

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