Eckig 2/4. So deaktivieren Sie ein Kontrollkästchen für einige Sekunden, wenn ein Kontrollkästchen angeklickt wird

Question

Ich bin neu in Angular2/4 und eckigen Typoskript. Ich möchte alle Kontrollkästchen für 3 Sekunden deaktivieren, wenn ein Benutzer auf ein Kontrollkästchen klickt, um einen Server-Anruf zu tätigen.

Wie kann ich das in Angular 2/4 tun? Ich habe den Code-Schnipsel unten enthalten:

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

Da Sie md-checkbox verwenden wir die die disabled Eigenschaft nutzen können.

Deklarieren Sie ein Deaktivierungs-Flag für die Kontrollkästchen und fügen Sie eine Timeout-Funktion in component.ts hinzu.

disableFlag = false; 

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

und fügen Sie sie zu md-checbox und change Ereignis:

<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

Sie RxJS verwenden können beobachtbare das Timeout einstellen, wenn Ihre Checkbox angeklickt wird. Sie fügen [disabled]="yourVariable" für alle Checkboxen hinzu, die Sie deaktivieren möchten, und in Ihrem Event-Handler instanziieren Sie trueyourVariable, rufen Sie das Observable setTimeout auf, instanziieren Sie dann 'yourVariable' erneut in false.

fand ich ein plunkr Beispiel dafür, wie setTimeouthere