Angular 2/4。如何在單擊複選框時禁用複選框

Question

我是Angular2/4和角色打字稿的新手。我想在用戶點擊複選框進行服務器調用時禁用所有複選框3秒鐘。

我如何能做到這一點的角度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可觀測到設置超時被點擊您的複選框時。你要禁用所有的複選框，並在您實例化trueyourVariable您的事件處理程序添加[disabled]="yourVariable"，調用可觀察的setTimeout，然後重新實例「yourVariable」到false。

我發現如何實現setTimeouthere