首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Angular 2/4。如何在单击复选框时禁用复选框几秒钟

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

Stack Overflow用户
提问于 2017-07-25 21:28:26
回答 2查看 3.5K关注 0票数 0

我是Angular2/4和angular typescript的新手。当用户单击复选框进行服务器调用时,我希望禁用所有复选框3秒。

我如何在Angular 2/4中做到这一点?我已经包含了下面的代码片段:

wiz.component.html

代码语言:javascript
复制
 <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

代码语言:javascript
复制
     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;
  }
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-07-25 21:46:02

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

为复选框声明一个禁用标志,并在component.ts中添加一个超时函数。

代码语言:javascript
复制
disableFlag = false;

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

并将它们添加到md-checboxchange事件中:

代码语言:javascript
复制
<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

票数 0
EN

Stack Overflow用户

发布于 2017-07-25 21:54:15

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

我找到了一个关于如何实现setTimeout here的示例。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/45304814

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档