Angular 2/4。单击复选框时如何禁用复选框几秒钟

Question

我是 Angular2/4 和 angular 打字稿的新手。当用户点击复选框进行服务器调用时，我想禁用所有复选框 3 秒。

我怎样才能在 Angular 2/4 中做到这一点？我在下面包含了代码片段：

wiz.component.html

 <div class="table-header header-eligible">
      <div class="select-all">
        <md-checkbox name="chkSelectAll" [(ngModel)]="isSelectAll" (change)="onSelectAll()"></md-checkbox>
      </div>
      <div>Account Number</div>
      <div>Client Name</div>
      <div>Account Type</div>
      <div class="datatype-numeric">Long Market Value</div>
      <div class="datatype-numeric">Estimated Borrowing Power</div>
    </div>
    <div *ngFor="let e of eligibleArray; let i = index;" >
      <div class="table-content content-eligible">
        <div>
          <md-checkbox name="chkSelect{{i}}" [(ngModel)]="e.isSelected" (change)="onSelect(i)"></md-checkbox>
        </div>
        <div class="link" (click)="openAccountPopUp(i)">{{e.accountNumber}}</div>
        <div>{{e.clientName}}</div>
        <div>{{e.accountType}}</div>
        <div class="datatype-numeric">{{e.marketValue | currency:'USD':true}}</div>
        <div class="datatype-numeric">{{e.advanceAmount | currency:'USD':true}}</div>
      </div>
    </div>

wiz.component.ts

     initSelected(): void {
        if( this.advisorClientModel.pledgedAccounts.length == 0 )
        {
          // Init first time from source array
          for( let e of this.eligibleArray )
          {
            // select all accounts by default, first time in
            e.isSelected = true;
          }
          this.isSelectAll = true;
        }
        else 
        {
          for( let e of this.eligibleArray )
          {
            if( this.advisorClientModel.pledgedAccounts.includes(e.accountNumber) )
              e.isSelected = true;
          }      
          let selectedCount = this.advisorClientModel.pledgedAccounts.length;
          if( selectedCount == this.eligibleArray.length )
          {
            this.isSelectAll = true;
          }
        }
        this.updateSelectedTotals();
      }
 updateSelectedTotals(): void {
    this.invalidAccountsMessage = "";
    let marketTotal:number = 0;
    let advanceTotal:number = 0;
    for( let e of this.eligibleArray )
    {
      if( e.isSelected )
      {
        marketTotal = Number(marketTotal) + Number( e.marketValue);
        advanceTotal = Number(advanceTotal) + Number( e.advanceAmount);
      }
    }
    this.eligibleSelected.marketValue = marketTotal;
    this.eligibleSelected.advanceAmount = advanceTotal;
  }

  onChangeAmount(): void {
    // Apply Amount Format
    let sIn: string = this.loanAmountString;
    let sOut: string = this.inputMaskService.getFormatAmount(sIn);
    if( sIn != sOut )
    {
      // Only update model if format rules modified it
      this.loanAmountString = sOut;
    }

    sOut = sOut.replace(/\D/g,'');
    if( sOut.length > 0 )
    {
      let n: number = Number(sOut);
      if( n < 100000 ) {
        this.invalidAmountMessage = "Amount must be >= 100K";
        this.isValidAmount = false;
      }
      else if ( n > 10000000 ) {
        this.invalidAmountMessage = "Amount must be <= 10 Million";
        this.isValidAmount = false;
      }
      else 
      {
        this.loanAmount = n;
        this.isValidAmount = true;
      } 
    }
    else
    {
      this.isValidAmount = false;
    }
  }

  onChangeMax(): void {
    this.loanAmountString = "";
    this.loanAmount = 0;
    if( this.isMaximumAmount )
    {
      this.isValidAmount = true;
    }
    else
    {
      this.isValidAmount = false;
    }
  }

  onSelect(i:number): void {
    this.isSelectAll = ( this.numberOfSelectedAccounts() == this.eligibleArray.length );
    this.updateSelectedTotals();
  }

  onSelectAll(): void {
    for( let e of this.eligibleArray )
    {
       e.isSelected= this.isSelectAll;
    }
    this.updateSelectedTotals();
  }

numberOfSelectedAccounts(): number {
    let selectedCount = 0;
    for( let e of this.eligibleArray )
    {
      if( e.isSelected ) selectedCount++;
    }
    return selectedCount;
  }

Answer 1

由于您使用的是 md-checkbox，我们可以利用 disabled 属性。

为复选框声明禁用标志并在component.ts中添加超时功能。

disableFlag = false;

disableCheckBox(){
  this.disableFlag = true;
  setTimeout(() =>{
    this.disableFlag = false; 
          }, 3000);
}

并将它们添加到 md-checbox 和 change 事件中：

<md-checkbox name="chkSelectAll" 
             [(ngModel)]="isSelectAll" 
             (change)="onSelectAll(); disableCheckBox()"
             [disabled]="disableFlag"></md-checkbox>


<md-checkbox name="chkSelectAll" 
             [(ngModel)]="isSelectAll" 
             (change)="onSelectAll(); disableCheckBox()" 
             [disabled]="disableFlag"></md-checkbox>

Plunker example

Answer 2

您可以使用 RxJS Observable 来设置单击复选框时的超时时间。您在要禁用的所有复选框和实例化为 true yourVariable 的事件处理程序上添加 [disabled]="yourVariable"，调用 Observable setTimeout，然后将 'yourVariable' 重新实例化为 false.

我找到了一个关于如何实现 setTimeout here

的 plunkr 示例

Angular 2/4。单击复选框时如何禁用复选框几秒钟

Angular 2/4. How to disable a checkbox for few seconds when a checkbox is clicked

angular2-directives

angular