使用条件更改Angular中的元素文本

Question

我在更改 Angular 中的元素内容时遇到了问题。我正在制作一个井字游戏，我在玩家做的每一个动作中都放置了标题，但是当玩家获胜时，我想在那个地方渲染。代码如下：

<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 并隐藏第一个 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 始终被定义但在没有获胜者时具有不同的值，那么您必须更改条件以反映这一点。