Setzen des Anfangswerts mit ngModel für Select-Dropdown

Question

Ich habe ein Array von tranTypes (Transaktionstypen), die in ein Dropdown geladen werden. Nachdem der Benutzer einen Wert ausgewählt hat und zu einer anderen Komponente navigiert, wird der Wert im Drop-down-Menü nicht ausgewählt.

Aus anderen Lesungen habe ich gelernt, das ist B/C die Objekte sind nicht die gleiche Instanz. Was mache ich dann in dieser Situation?

<select name="tranType" 
    class="form-control" 
    [(ngModel)]="model.tranType" 
    required> 
    <option *ngFor="let tranType of tranTypes" 
    [ngValue]="tranType">{{tranType.desc}}</option> 
</select> 

Lösung

ngOnInit(): void { 
    this.myService.getTranTypes() 
     .subscribe(tranTypes => { 
      this.tranTypes = tranTypes; 
      //set value of tranType if already set in the model 
      if (this.myService.model.tranType != undefined) { 
       this.myService.model.tranType = this.tranTypes.find(r => r.id == this.myService.model.tranType.id); 
      } 
     }, 
     error => this.errorMessage = <any>error); 
} 

Answer 1

Von 4.0.0-beta.6 auf, eine benutzerdefinierte Vergleichsfunktion

<select [compareWith]="equals" 

können

equals(o1: Country, o2: Country) { 
    return o1.id === o2.id; 
} 

für frühere Versionen können Sie die tranType in tranTypes suchen, indem Sie den Inhalt ähnlich wie oben vergleichen, und dann die gefundene Instanz model.tranType zuweisen, um sie zum ausgewählten zu machen.

Answer 2

Sie müssen die Variable model.tranType in einem Service platzieren, die von einem Modell geladen wird, das die zwei Modelle lädt, zwischen denen Sie navigieren. Auf diese Weise erhalten Sie einen Singleton-Service, und die Variable wird beibehalten, während Sie Ihre Site verwenden. Das Problem bei diesem Ansatz besteht darin, dass beim Aktualisieren der Seite der Dienst neu gestartet wird und die Standardoption erneut aktiviert wird. Um dies zu beheben, müssen Sie den Variablenstatus in localStorage speichern, sodass die Option auch beim Schließen des Browsers unverändert bleibt.

Answer 3

Sie sollten den an das ngModel gebundenen Wert genau mit dem des Objekts innerhalb des Arrays vergleichen.

<select [(ngModel)]="model.tranType"> 
<option *ngFor="let type of tranTypes" [ngValue]="type.id">{{type.Desc}}</option> 
</select> 

Am besten empfohlen ID-Eigenschaft als ngValue zu verwenden.

LIVE DEMO