ボタンをクリックするとドロップダウンがデフォルト値にリセットされます

Question

私のテンプレートには以下のようにレンダリングされるグリッドがあります。グリッドには複数のドロップダウン（1行に1つ）があり、ボタンをクリックすると、これらの値が収集されます。しかし、ボタンをクリックすると、すべてのドロップダウンがデフォルト値にリセットされます。

<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コンポーネントのselectドロップダウンのオプションを設定する配列があります。ここ

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. ")  
} 

Answer 1

フォームを追加したくない場合は、少なくともあなたはそれが価値バインドするために、select要素にngModelを追加することができますプロパティを設定してからリセットします。それから、あなたは捜索（変更）する必要はありません。以下のような何か：

selectedValuesは、そのプロパティである

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

。そして、あなたは簡単にその値をリセット：ボタンクリック方法から

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

コールthis.reset()。

簡略化demo