Zurücksetzen der Dropdown-Menüs auf den Standardwert nach dem Klicken auf die Schaltfläche

Question

Ich habe ein Raster, das in meiner Vorlage gerendert wird, wie unten gezeigt. Das Raster hat mehrere Dropdown-Listen (eins pro Zeile) und ich sammle die Werte, wenn ich auf eine Schaltfläche klicke. Nachdem ich jedoch auf die Schaltfläche geklickt habe, möchte ich alle Drop-Downs auf den Standardwert zurücksetzen.

Hier ist das Array, das die Optionen in der Select-Dropdown-Liste in der Typoskript-Komponente festlegt.

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 } 
    ]; 

Und schließlich hier ist der Code für die Schaltfläche klicken:

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

Wenn Sie nicht Formular hinzufügen möchten, dann zumindest können Sie ngModel an das Auswahlelement hinzufügen, um es zu binden Wert zu eine Eigenschaft und dann zurücksetzen. Dann müssen Sie nicht retreive (ändern), es ist gebunden. Etwas wie folgt aus:

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

wo selectedValues diese Eigenschaft ist. Dann einfach Sie ihre Werte zurück:

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

Anruf this.reset() aus der Button-Klick-Methode.

vereinfacht demo