点击按钮后将下拉菜单重置为默认值

我有一个网格在我的模板中呈现，如下所示。网格有多个下拉列表（每行一个），当我点击一个按钮时，我收集这些值。然而，当我点击按钮后，我想将所有下拉菜单重置为默认值。点击按钮后将下拉菜单重置为默认值

<div> 
    <button (click)="onClickUpdate($event, filteredRequesters)">Update</button> 
</div> 
<tbody> 
    <tr *ngFor='let requester of filteredRequesters'> 
     <td> 
      <select id="ddStatus" type="number" (change)="onChange($event.target.value, requester)"> 
      <option *ngFor="let level of levels"> 
    {{level.name}}</option> 
      </select> 
     </td> 
     <td>{{ requester.RequesterID }}</td> 
     <td> {{ requester.FullName }} </td> 
     <td>{{ requester.CompanyName }}</td> 
     <td>{{ requester.RequesterClass}}</td> 
     <td>{{ requester.Address}}</td> 
     <td>{{ requester.MobilePhone}}</td> 
     <td>{{ requester.TotalRequests}}</td> 
     <td>{{ requester.EmailAddress}}</td> 
    </tr> 
</tbody>

这是在typescript组件中的选择下拉列表中设置选项的数组。

levels: Array<{ num: number, name: string, total: number }> = [ 
    { num: 0, name: "ignore", total: 0 }, 
    { num: 1, name: "child", total: 0 }, 
    { num: 2, name: "parent", total: 0 } 
    ];

最后这里是按钮单击代码：

onClickUpdate(event, filteredRequesters) { 

    var count: number; 
    count = 0; 

    for (var i = filteredRequesters.length - 1; i >= 0; i--) { 
     if (count > 1) { 
      continue; 
     } 

     if (filteredRequesters[i].isDisabled == 2) 
      count++ 
    } 

    if (count == 1) { 
     this._productService.updateRequester(filteredRequesters); 
     var countToRemove: number; 
     // get new total requests for merged reqwester 
     var countIndex: number = 0; 
     countToRemove = 0; 
     for (var i = filteredRequesters.length - 1; i >= 0; i--) 
      if (filteredRequesters[i].isDisabled == 1) { 
       countToRemove += filteredRequesters[i].TotalRequests; 
      } 
      else if (filteredRequesters[i].isDisabled == 2) 
       countIndex = i; 

     filteredRequesters[countIndex].TotalRequests += countToRemove; 
     filteredRequesters[countIndex].isDisabled = 0; 

     for (var i = filteredRequesters.length - 1; i >= 0; i--) 
      if (filteredRequesters[i].isDisabled == 1) 
       filteredRequesters.splice(i, 1); 
       // this._productService.getRequestersByFirsterLetter('a') 
       // .subscribe(products => { 
       //  this.products = products; 
       //  this.filteredRequesters = this.products; 
       // }, 
       // error => this.errorMessage = <any>error); 
    } 
    else alert("Only one parent allowed. ")  
}

来源

2017-10-04 DeadlyDan

请解释什么是不工作？ – Vega

NP - - 点击更新按钮后。任何已被用户更改的选择都不会重置回初始选项。我需要所有的选择重新回到最初的选项，但我不知道如何在打字稿中做到这一点。谢谢 – DeadlyDan

最简单的方法，使它成为一个窗体，只要你想调用'form.reset（）'。如果这是一种可能性，那就是使它成为一种形式。 – Alex

如果你不希望添加的形式，那至少你可以添加ngModel select元素绑定它的价值来一个属性，然后重置它。那么你不需要检索（改变），它是有约束力的。类似以下内容：

<select id="ddStatus" [(ngModel)]="selectedValues[i]" type="number">

其中selectedValues是该属性。然后你轻松重置自己的价值观：

reset(){ 
     this.selectedValues=["ignore","ignore","ignore"]; 
    }

呼叫this.reset()从按钮点击方法。

简化demo

来源

2017-10-04 18:36:01 Vega

点击按钮后将下拉菜单重置为默认值

回答

相关问题