angular2不能在一个元素上绑定多个模板

angular2 Can't have multiple template bindings on one element

本文关键字：绑定 元素 不能 angular2 一个      更新时间：2023-09-26

我有这个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 = []的发生。不然我怎么修呢?

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

在这种情况下应该使用<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>
相关文章：