Javascript 下拉列表-按值绑定模型-角度2

我有一个页面，允许用户更新汽车的颜色。有两个api调用，一个用于返回car json对象，另一个用于填充颜色下拉列表

我的问题是Angular 2似乎通过引用而不是值进行模型绑定。这意味着，尽管可能会在汽车上设置颜色“绿色”，但即使颜色“绿色”匹配，也不会在下拉列表中选择，因为该对象来自不同的api调用

在这里，选择列表绑定到汽车的“颜色”属性

<div>
    <label>Colour</label> 
    <div>
        <select [(ngModel)]="car.colour">     
            <option *ngFor="let x of colours" [ngValue]="x">{{x.name}}</option>
        </select> 
    </div>
</div>

颜色
{{x.name}

当我在后端设置模型时，如果我将汽车的颜色设置为具有相同的值对象（在本例中为绿色），则不会选择下拉列表。但是，当我使用用于绑定列表的值列表中的同一个实例进行设置时，它会按预期被选中

  ngOnInit(): void {

        this.colours = Array<Colour>();
        this.colours.push(new Colour(-1, 'Please select'));
        this.colours.push(new Colour(1, 'Green'));
        this.colours.push(new Colour(2, 'Pink'));

        this.car = new Car();
        //this.car.colour = this.colours[1]; // Works
        this.car.colour = new Colour(1, 'Green');  // Fails    
    }

ngOnInit（）：void{
this.colors=Array（）；
此.colors.push（新颜色（-1，‘请选择’）；
这个.colors.push（新颜色（1，'绿色'）；
这个.colors.push（新颜色（2，“粉色”）；
这辆车=新车；
//this.car.color=this.colors[1]；//有效
this.car.color=新颜色（1，“绿色”）；//失败
}

这是一张显示问题的照片。只需在这些行之间切换即可说明问题

this.car.color=this.colors[1]；//工作

this.car.color=新颜色（1，“绿色”）；//失败

以这种方式绑定时，如何通过值而不是引用来比较对象

问候

史蒂夫

更新

在我的用例中，我通过将models“superPower”属性设置为用于填充下拉列表的列表中的匹配项来解决这个问题

setupUpdate(id: number): void {

    this.pageMode = PageMode.Update;
    this.submitButtonText = "Update";

    this.httpService.get<Hero>(this.appSettings.ApiEndPoint + 'hero/' + this.routeParams.get('id')).subscribe(response => { 
        this.hero = response;             

        this.httpService.get<SuperPower[]>(this.appSettings.ApiEndPoint + 'superPower/').subscribe(response => {
            this.superPowers = response;   
            this.hero.superPower = this.superPowers.filter(x => x.id == this.hero.superPower.id)[0];
        });
    });
}

setupUpdate（id:number）：无效{
this.pageMode=pageMode.Update；
this.submitbuttonext=“更新”；
this.httpService.get（this.appSettings.apidentpoint+'hero/'+this.routeParams.get（'id'））.subscribe（response=>{
这个英雄=回应；
this.httpService.get（this.appSettings.apidendpoint+'superPower/'）。订阅（响应=>{
超级大国=反应；
this.hero.superPower=this.superPowers.filter（x=>x.id==this.hero.superPower.id）[0]；
});
});
}

这就是设计。Angular2仅比较对象引用，而不比较对象的属性

您可以绑定到原语值，然后compairson按您的预期工作

    <select [(ngModel)]="car.colour.name">     
        <option *ngFor="let x of colours" [value]="x.name">{{x.name}}</option>
    </select> 

{{x.name}

假设

Color

具有一个属性

name

，该属性包含字符串

Green

---

您也可以通过在颜色中查找

car.color

，并从表示相同颜色的颜色中将

car.color

设置为

color

实例来进行比较。

您可以使用以下方法

<select [(ngModel)]="car.colour.name" (ngModelChange)="someFunction($event)" >     
    <option *ngFor="let x of colours" [value]="x.name">{{x.name}}</option>
</select> 

{{x.name}

---

当所选值将被更新时，您将在某些函数中使用“value”而不是“ngValue”来处理此问题，这意味着验证指令在下拉列表中不起作用。我将不得不使用断开连接的模型。谢谢