Javascript 如何使用*ngIf else渲染组件

我对angular很陌生，我正在编写虚拟应用程序来教自己angular。 我的想法是有两个输入，player1和player2写下他们的名字。当他们按下按钮时，游戏开始并显示他们的名字和健康状况

我是用*ngIf else来做的，但是当我点击按钮来更改布尔值时，没有显示任何内容

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

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>

我想在if station中呈现其他组件或HTML if boolean更改。

仅创建一个模板，默认情况下不会显示，用于帮助分组和 向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并写入[ngIf]，但不推荐使用

将带有ngIf的ng模板更改为ng容器祝您好运。泰：）@JanAničić：很高兴这有帮助：）如果答案确实是这样的话，你可以更好地解释一下。您还提到，不建议使用上述方法，因此值得解释为什么会出现这种情况。

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

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