在 Angular NgIf 中更改 return 值

Question

我的angular9项目中有一个按钮如下

 <button *ngIf="showRaiseButton()" [ngClass]="unlockRaiseButton()" (click)="showRaiseOptions()">RAISE
      <h3 class="text-on-btn-ch"> R</h3>
    </button>

这个按钮是根据ngif里面函数的return值显示的

  showRaiseButton(){
    return this.actionState === 'actBettedPot' || this.actionState === 'actNotBettedPot'
      || this.actionState === 'folded' || this.actionState === 'called'
      || this.actionState === 'checked' || this.actionState === 'bet'
      || this.actionState === 'raised';
  }

我需要在点击的时候隐藏这个按钮button.The点击如下

  showRaiseOptions(){
    if (this.unlockRaiseBtn){
      this.showRaiseOption = true;
      this.showBetOption = false;
      this.displayRaiseBtn = false;
    }
  }

我该怎么做task.Please帮助

Answer 1

我会为按钮创建一个变量，它看起来像这样

showBtn: boolean;

showRaiseButton(){
  if (this.actionState === 'actBettedPot' || this.actionState === 'actNotBettedPot'
      || this.actionState === 'folded' || this.actionState === 'called'
      || this.actionState === 'checked' || this.actionState === 'bet'
      || this.actionState === 'raised';) {
      this.showBtn = true
      }
    return 
  }

然后在按钮上单击添加另一个操作，如下所示：

showRaiseOptions(){
    if (this.unlockRaiseBtn){
      this.showRaiseOption = true;
      this.showBetOption = false;
      this.displayRaiseBtn = false;
      this.showBtn = false
    }
  }

<button ngIf="showBtn" (click)="showRaiseoptions()"></button>

但是，如果您必须在代码中的其他地方调用 ShowRaiseButton() ，当某个动作发生时可能是 this.actionState 值更改或 ngOnInit 取决于您的代码的其余部分

Answer 2

您应该使用外部条件在您的视图中显示或隐藏一个部分，ng-container 不会将 html 标记作为 div 或 ...

例如你可以这样使用它：

displayRaiseBtn: boolean = true;

<ng-container *ngIf="displayRaiseBtn">
     <button *ngIf="showRaiseButton()" [ngClass]="unlockRaiseButton()" (click)="showRaiseOptions()">
        RAISE
        <h3 class="text-on-btn-ch"> R</h3>
     </button>   
</ng-container>

你也可以使用 [hidden]='!displayRaiseBtn' 按钮，但我推荐第一个选项。

在 Angular NgIf 中更改 return 值

Change return value in Angular NgIf

button

show-hide

angular-ng-if

angular

angular9