點擊按鈕後將下拉菜單重置爲默認值

我有一個網格在我的模板中呈現，如下所示。網格有多個下拉列表（每行一個），當我點擊一個按鈕時，我收集這些值。然而，當我點擊按鈕後，我想將所有下拉菜單重置爲默認值。點擊按鈕後將下拉菜單重置爲默認值

<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

點擊按鈕後將下拉菜單重置爲默認值

回答

相關問題