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选择具有初始值的复杂对象

回答

相关问题