0

其实我被困在这件事上。

我想要做的是我的 Component.html 文件中有 3 个有角度的按钮，我需要的是，当我加载页面时，应该只启用按钮（获取银行详细信息），然后应该禁用其他两个按钮我单击（获取银行详细信息）按钮，它现在应该禁用，下一个按钮（查看银行详细信息）现在应该启用，而其他 2 个按钮禁用，当我单击（查看银行详细信息）按钮时，第三个按钮（开始更新银行）现在应该启用，其余 2 禁用。

如果我用简单的方式解释

on Page Load :  1 Button - enabled , 2 Button - disabled , 3 Button - disabled
After 1 Button clicked : 1 Button - disabled , 2 Button - enabled , 3 Button - disabled
After 2 Button clicked : 1 Button - disabled , 2 Button - disabled , 3 Button - enabled

** 这是 HTML 代码**

 <div style="width: 2000px; padding: auto;">
                            
                            <button id="button1" class="btn btn--radius-2 btn--red" type="submit" >Get Bank Details</button> | 
                            <button class="btn btn--radius-2 btn--red" type="submit" (click)="getBankById()" >See Bank Details</button> |
                            <button  class="btn btn--radius-2 btn--red" type="submit" (click)="router.navigate(['/home/patchBank']);">Go to Update Bank</button>
                        
                        </div>
4

2 回答 2

0

您可以创建两个布尔标志来检查应该启用和禁用哪个按钮，然后使用该[disabled]属性有条件地启用或禁用该按钮。一个小例子如下所示：

seeBankDetailFlag: boolean;
goToUpdateBankFlag: boolean;

  ngOnInit(): void{
     this.seeBankDetailFlag = true;
     this.goToUpdateBankFlag = true;
  }

  getBankDetails(): void{
     this.seeBankDetailFlag = false;
  }

  getBankById(): void{
       this.seeBankDetailFlag = true;
       this.goToUpdateBankFlag = false;
  }

然后在您的 HTML 中将标志与[disabled]

 <div style="width: 2000px; padding: auto;">
     <button id="button1" class="btn btn--radius-2 btn--red" type="submit" (click)="getBankDetails()" 
     [disabled]="!seeBankDetailFlag || !goToUpdateBankFlag">
        Get Bank Details
     </button>
     <button class="btn btn--radius-2 btn--red" type="submit" (click)="getBankById()" 
     [disabled]="seeBankDetailFlag">
         See Bank Details
     </button>
     <button class="btn btn--radius-2 btn--red" type="submit" (click)="router.navigate(['/home/patchBank']);" 
     [disabled]="goToUpdateBankFlag">
         Go to Update Bank
     </button>
 </div>

一个简单的 stackblitz 示例： https ://stackblitz.com/edit/angular-3hdcbk

于 2022-02-03T12:49:02.247 回答
0

我能想到的最简单的事情就是为每个按钮设置一个布尔值

disableGetBankDetails = false;
seeBankDetails = true;

<button id="button1" [disabled]=[disableGetBankDetails] (click)="getBankDetails()" type="submit" >Get Bank Details</button>

<button [disabled]=[seeBankDetails]>See Bank Details</button>

当您单击获取银行详细信息按钮时，您可以将值更改为您需要的值。

getBankDetails() {
    this.disableGetBankDetails = true;
    this.seeBankDetails = false;
}
于 2022-02-03T12:51:31.140 回答