如何在 ng-container 中使用 ngIfThen

Question

我正在构建一个简单的剪刀石头布应用程序。当我点击一个按钮 (rock/paper/scissor) 时，它会说：“你选择了......”。之后它应该隐藏其他 2 个按钮。

我想选择隐藏整个 ng-container 的选项。有没有一种方法可以在单击其中一个按钮后隐藏 ng-container ？所以在 *ngIfThen 语句中添加它？

<div *ngIf="hand==='rock' then rockTemplate"></div> <div *ngIf="hand==='paper' then paperTemplate"></div> <div *ngIf="hand==='scissors' then scissorTemplate"></div> <ng-template #rockTemplate> You picked: <app-rock></app-rock> </ng-template> <ng-template #paperTemplate> You picked: <app-paper></app-paper> </ng-template> <ng-template #scissorTemplate> You picked: <app-scissors></app-scissors> </ng-template> <ng-container #hideContainer class="board"> <app-rock (click)="pickHand('rock')"></app-rock> <app-paper (click)="pickHand('paper')"></app-paper> <app-scissors (click)="pickHand('scissors')"></app-scissors> </ng-container>

Answer 1

我想你可以用 ng-switch 来简化：

<div [ngSwitch]="hand">
  <div *ngSwitchCase="rock">You picked: <app-rock></app-rock></div>
  <div *ngSwitchCase="paper">You picked: <app-paper></app-paper></div>
  <div *ngSwitchCase="scissors">You picked: <app-scissors></app-scissors> 
</div>
<ng-container *ngIf="!hasSelection" class="board">
  <app-rock (click)="pickHand('rock')"></app-rock>
  <app-paper (click)="pickHand('paper')"></app-paper>
  <app-scissors (click)="pickHand('scissors')"></app-scissors>
</ng-container>


// In your component class
hasSelection: boolean;
hand: 'rock' | 'scissors' | 'paper';

// ...
pickHand(type: 'rock' | 'scissors' | 'paper') {
  this.hasSelection = true;
  this.hand = type;
}

有了 ng-switch，您的模板看起来更简洁易读。您可以通过布尔变量 show/hide ng-container，一旦用户选择一种 hand 类型，该变量就会切换。

我不知道你的逻辑，但如果用户有可能再次选择一手，你必须re-enable ng-container。

如何在 ng-container 中使用 ngIfThen

How to use ngIfThen with ng-container

angular

typescript

frontend

angular-ng-if