html - 根据条件更改 Angular 中的元素文本

Question

我在更改 Angular 中的元素内容时遇到问题。我正在做一个井字游戏，我把玩家做的每一个 Action 都放在标题上，但我想在玩家获胜时在那个地方渲染。这是代码:

<div *ngIf="_state$ | async">
  <p>
  Turn of {{ (_state$ | async).turn == 'PLAYERX' ? "Player 1 - Xs" : "Player 2 - 0s" }}
  </p>
  <p>
  There is a winner {{ (_state$ | async).winner == 'X' ? "Player 1 - Xs" : "Player 2 - 0s" }}
  </p>
</div>

我该怎么做。仅显示一次 如果玩家获胜则显示第二个

并且玩家正在玩并且没有赢得第一个。我只能显示第一个。

Answer 1

我猜 (_state$ | async).winner 只有在你有赢家时才会被定义。在这种情况下，您可以将其用作显示第二个 p 并隐藏第一个的条件。

<div *ngIf="_state$ | async as state">
  <p *ngIf="!state.winner">
  Turn of {{ state.turn == 'PLAYERX' ? "Player 1 - Xs" : "Player 2 - 0s" }}
  </p>
  <p *ngIf="state.winner">
  There is a winner {{ state.winner == 'X' ? "Player 1 - Xs" : "Player 2 - 0s" }}
  </p>
</div>

如果 (_state$ | async).winner 始终被定义但在没有赢家时具有不同的值，那么您必须更改条件以反射(reflect)这一点。