Angular 2選擇具有初始值的複雜對象

Angular（2.2）我試圖用複雜的對象初始化select。但由於該對象不是select列表中的某個實際引用（即使它是相同的），它也不會將其識別爲選定的。以下是我正在處理的內容：Angular 2選擇具有初始值的複雜對象

<select [(ngModel)]="model.object"> 
    <option *ngFor="let obj of objects" [ngValue]="obj">{{ obj.name }}</option> 
</select>

這會在您更改選擇時按預期工作。但在初始加載時，即使model.object與列表中的對象相同，它也不會選擇任何內容。

對此的兩種解決方法是（1）遍歷列表並交換model.object作爲直接引用，但這是許多項目的表中的一行，因此這將非常昂貴。或者（2）綁定[(ngModel)]="model.object.id"和[ngValue]="object.id"（一個簡單的類型），但我真的希望整個對象在模型中表示，所以我仍然必須綁定到事件處理函數，通過項目數組運行，直到找到這個ID，並自己設定。

我希望有辦法做track by的排序，所以最初的選擇跟蹤由ID。

在角1，這可以通過以下方式實現：

<select ng-model="model.object" 
    ng-options="obj.id as obj.name for obj in objects">

，但我似乎無法找到一個等價的。

來源

2016-12-02 JonG

你可以嘗試以下，

@Component({ 
    selector: 'my-app', 
    template: `Angular 
    <select (change)="chnageProduct($event.currentTarget.value)" > 
    <option *ngFor="let obj of objects" [value]="obj" 
    [selected]="model.name === obj.name" 
    >{{ obj.name }}</option> 
</select> 
    ` 
}) 
export class AppComponent { 
    result: any = {}; 

    constructor(){ 
    } 

    model = {name : "1"} 


    objects = [{name : "1"},{name: "2"}] 

    chnageProduct(val){ 
    this.model = val; 
    } 
}

這裏是Plunker！

希望這有助於！

來源

2016-12-02 19:34:16

很酷，我想我必須要這樣做。這太糟糕了，儘管我們不能使用本地'ngModel'。這似乎是他們的共同情景/監督。謝謝！ – JonG

@JonG猜猜怎麼着？他們已經注意到;）作爲參數的自定義比較函數正在使用https://github.com/angular/angular/issues/13268 – kub1x

這根本不起作用。我剛剛運行了plunker，並在組件的模型中設置了字符串「[object Object]」。不是一個對象。以前做過這個工作嗎？ – JDTLH9

Angular 2選擇具有初始值的複雜對象

回答

相關問題