Eckig 4 ​​Bedingung verschachtelt in Schleife

Question

können Sie mir helfen, meinen Code von ng4 zu beheben? Ich habe Reihe von Benutzermodellen, die jeder hat Eigenschaft Vornamen, Nachnamen und Alter wie folgt aus:

export class User { 
    public firstName: string; 
    public lastName: string; 
    public age: number; 

    constructor(fName: string, lName: string, age: number) { 
     this.firstName = fName; 
     this.lastName = lName; 
     this.age = age; 
    } 
} 

Hier ist mein component.ts Code:

export class UserItemComponent implements OnInit { 
    users: User[]; 

    constructor() { 
    this.users = [ 
     new User("John", "", 16), 
     new User("Jose", "", 45), 
     new User("Xavier", "", 22) 
    ] 
    } 

    ngOnInit() { 
    } 
} 

Als ich versuchte, es ohne Bedingung in Vorlage Es hat funktioniert. Nachdem ich die Bedingung hinzugefügt habe, habe ich folgende Probleme:

Unerwartetes schließendes Tag "p". Dies kann passieren, wenn das Tag bereits von einem anderen Tag geschlossen wurde.

Haben Sie eine Idee, was ich falsch gemacht habe? Hier ist der Code von HTML-Vorlage:

<p *ngFor="let user of users"> 
    <div *ngIf="user.age > 20; then old else young"></div> 
    <ng-template #old>Hello, my name is {{user.firstName}} and I'm too old - {{user.age}}.</ng-template> 
    <ng-template #young>Hello, my name is {{user.firstName}} and I'm too years young - {{user.age}}.</ng-template> 
</p> 

Answer 1

p Tag nur Inline-Elemente

ändern div-span (Inline-Element)

Why p tag can't contain div tag inside it?

Demo Plunker

Answer 2

Verwendung enthalten kann div statt p

<div *ngFor="let user of users"> 
    <div *ngIf="user.age > 20; then old else young"></div> 
    <ng-template #old>Hello, my name is {{user.firstName}} and I'm too old - {{user.age}}.</ng-template> 
    <ng-template #young>Hello, my name is {{user.firstName}} and I'm too years young - {{user.age}}.</ng-template> 
</div > 

Answer 3

ändern <div>-<ng-template>:

<p *ngFor="let user of users"> 
    <ng-template *ngIf="user.age > 20; then old else young"></ng-template> 
    <ng-template #young>Hello, my name is {{user.firstName}} and I'm too years young - {{user.age}}.</ng-template> 
    <ng-template #old>Hello, my name is {{user.firstName}} and I'm too old - {{user.age}}.</ng-template> 
</p> 

Der Grund dafür ist, dass es nicht empfohlen wird Ihnen eine <div> in einem <p> setzen, so Angular einen Fehler wirft. Sie können es so etwas wie das testen: