javascript - 如何使用 *ngIf else 渲染组件

Question

我是 Angular 新手，我正在编写虚拟应用程序来自学 Angular。我的想法是有 2 个输入，玩家 1 和玩家 2 写下他们的名字。当他们按下按钮时，游戏开始并显示他们的名字和健康状况。

我正在使用 *ngIf else 执行此操作，但是当我单击按钮更改 bool 值时，不会显示任何内容。

问题是什么？有更好的方法吗？

app.component.html

<p>This will not change!</p>
<ng-template *ngIf="startGame;
  else noStart">
  <p> Render other components for health and names. Did game start: {{startGame}}</p>
</ng-template>
<ng-template #noStart>
  <h1> Input player names to start the game!</h1>
  <input [(ngModel)]="player1">
  <br>
  <input [(ngModel)]="player2">
  <br>
  <button (click)="onStartGame()">Start</button>
</ng-template>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  startGame: boolean = false;
  player1: string = '';
  player2: string = '';
  username = '';

  setPlayer1(event) {
    this.player1 = event.target.value;
  }

  setPlayer2(event) {
    this.player2 = event.target.value;
  }

  onStartGame() {
    if(this.player1 !== '' && this.player2 !== '')
      this.startGame = true;
  }
}

如果 if 语句中的 bool 值发生变化，我想渲染其他组件或 HTML。

Answer 1

ng-template只需创建一个模板，默认情况下不会显示，请使用 ng-container为此目的，这有助于分组和 将多个元素添加到 DOM。

<p>This will not change!</p>
<ng-container *ngIf="startGame;
  else noStart">
  <p> Render other components for health and names. Did game start: {{startGame}}</p>
</ng-container>
<ng-template #noStart>
  <h1> Input player names to start the game!</h1>
  <input [(ngModel)]="player1">
  <br>
  <input [(ngModel)]="player2">
  <br>
  <button (click)="onStartGame()">Start</button>
</ng-template>

---

您可以使用*ngIf事件指令与 p 标记，因为只有一个元素(p 标记)并使用 ng-container每当您想要对多个元素进行分组时。

<p>This will not change!</p>
<p *ngIf="startGame;
  else noStart"> Render other components for health and names. Did game start: {{startGame}}</p>
<ng-template #noStart>
  <h1> Input player names to start the game!</h1>
  <input [(ngModel)]="player1">
  <br>
  <input [(ngModel)]="player2">
  <br>
  <button (click)="onStartGame()">Start</button>
</ng-template>