angular2 Nie można mieć wiele powiązań szablonów na jednym elemencie

Question

mam ten angular2 szablonu:

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

otrzymuję te błędy:

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 

czym problem kładę * ngIf i * ngFor w różne elementy html. Powinno działać. Nie?

oraz:

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 

dodałem

*ngIf="alerts.length > 0 aby uniknąć przypadków alert = []. Jak mogę to naprawić inaczej?

Answer 1

Numer * w *ngFor powoduje, że Angular ma dodawać znacznik <template>. Na tagu <template> nie ma to sensu i dlatego tutaj dyrektywy strukturalne mają inną składnię.

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

Bo inna składnia dla prawie taka sama w różnych miejscach spowodował sporo zamieszania kątowej zespół niedawno wprowadzony

<ng-container> 

że zachowuje się podobnie do znacznika <template> (nie zostanie dodany do DOM), ale pozwala na bardziej wspólnej składni

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