使用ngModel為選擇下拉菜單設置初始值

Question

我有一個tranTypes （事務類型）數組， tranTypes數組已加載到下拉列表中。 用戶選擇一個值並在返回時導航到另一個組件后，在下拉列表中未選擇該值。

從其他閱讀中，我了解到這是對象不相同的實例。 那么在這種情況下我該怎么辦？

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

解

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

您應該將綁定到ngModel的值與數組內對象的綁定值完全相同。

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

最好將id屬性用作ngValue。

現場演示

Answer 2

從4.0.0-beta.6開始，您可以使用自定義比較功能

<select [compareWith]="equals"

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

對於早期版本，您可以通過比較類似於上述內容的內容在tranType中tranTypes ，然后將找到的實例分配給model.tranType以使其成為選定的實例。

Answer 3

您必須將變量model.tranType放入由模型加載的服務中，該模型將加載要在其中導航的兩個模型。 這樣，您最終將獲得單例服務，並且變量將在您使用站點時持久化。 這種方法的問題在於，如果刷新頁面，該服務將重新啟動，並且將再次選擇默認選項。 要解決此問題，必須將model.tranType變量狀態保存在localStorage中，因此即使關閉瀏覽器，該選項也將保持不變。