javascript - angular2 一个元素上不能有多个模板绑定(bind)

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 = [] 的情况。否则我该如何解决？

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