Angular 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() {
  }
}

当我在模板中无条件地尝试它时，它起作用了。添加条件后，出现以下问题：

Unexpected closing tag "p". It may happen when the tag has already been closed by another tag.

你知道我做错了什么吗？这是 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代替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

将<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> 中，因此 Angular 会引发错误。你可以测试它做这样的事情：

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

Angular 4个条件嵌套在循环中

Angular 4 condition nested in loop

angular-ng-if

angular