Angular 4 条件嵌套在循环中答案

【问题标题】：Angular 4 condition nested in loopAngular 4 条件嵌套在循环中
【发布时间】：2017-07-29 13:30:34
【问题描述】：

你能帮我修复我的 ng4 代码吗？我有一系列用户模型，每个模型都有属性 firstName、lastName 和 age 这样的：

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>

【问题讨论】：

标签： angular angular-ng-if

【解决方案1】：

p标签只能包含内联元素

将div 更改为span（内联元素）

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

Demo Plunker

【讨论】：

【解决方案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 >

【讨论】：

【解决方案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>

【讨论】：