[英]angular2 Can't have multiple template bindings on one element
I have this angular2 template: 我有这个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>
I get these errors: 我收到这些错误:
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
what's the problem I put *ngIf and *ngFor in defferent html elements. 我把* ngIf和* ngFor放在不同的html元素中是什么问题。 It should work.
它应该工作。 no?
没有?
and: 和:
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
I added the 我加了
*ngIf="alerts.length > 0
to avoid cases of alert = []
. How can i fix it otherwise? *ngIf="alerts.length > 0
以避免alert = []
。我怎么能修复它呢?
The *
in *ngFor
makes Angular to add a <template>
tag. *
in *ngFor
使Angular添加<template>
标签。 On a <template>
tag this doesn't make sense and therefore here structural directives have a different syntax. 在
<template>
标签上,这没有意义,因此这里的结构指令具有不同的语法。
<template ngFor [ngForOf]="alerts" let-alert let-i="index">
Because different syntax for almost the same on different places caused quite some confusion, the Angular team recently introduced 因为在不同的地方几乎相同的不同语法引起了相当多的混乱,Angular团队最近介绍了
<ng-container>
that behaves similar to the <template>
tag (is not added to the DOM) but allows the more common syntax 其行为类似于
<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>
You should use <ng-container>
for this case. 在这种情况下,您应该使用
<ng-container>
。 As a example: 举个例子:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.