嵌套在循環中的角度4條件

Question

你能幫我解決我的ng4代碼嗎？我有用戶模型的陣列，其中每一個有屬性名字，姓氏，和年齡這樣的：

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

這裏是我的component.ts代碼：

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

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

    ngOnInit() { 
    } 
} 

當我在模板嘗試過沒有條件，它正在工作。添加條件後，我遇到以下問題：

意外的結束標記「p」。當標籤已經被另一個標籤關閉時，可能會發生這種情況。

你知道我做錯了什麼嗎？這裏是HTML模板的代碼：

<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標籤只能包含內聯元素

變化div到span（內嵌元素）

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

Demo Plunker

Answer 2

使用div代替對

<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

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

的原因是，它是不建議你把<div>一個<p>裏面，所以角拋出一個錯誤。你可以測試它做這樣的事情：

<p><div>This will throw the same error in Angular</div></p>