下拉列表 - 按值绑定模型 - angular 2

Question

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

我的问题是 Angular 2 似乎通过引用而不是值进行模型绑定。这意味着虽然颜色 'green' 可能设置在汽车上，但颜色 'green' 不会被 select 编辑在下拉列表中，即使它匹配，因为该对象来自不同的 api 调用。

这里的select列表绑定到car的'colour'属性。

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

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

  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    
    }

这里有一个 plunker 显示了这个问题。只需在这些 to 行之间切换即可说明问题。

this.car.colour = this.colours[1]; // 有效

this.car.colour = 新颜色(1, 'Green'); // 失败

https://plnkr.co/edit/m3xBf8Hq9MnKiaZrjAaI?p=preview

如何才能 angular 在以这种方式绑定时按值而不是引用比较对象？

此致

史蒂夫

更新

我通过将模型 '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];
        });
    });
}

Answer 1

这是设计好的。 Angular2 只比较对象引用，不比较对象的属性。

您可以绑定到原始值，然后 compairson 将按您预期的方式工作

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

假设 Color 有一个属性 name 包含字符串 Green.

您也可以通过查找 car.colour 颜色并将 car.colour 设置为来自代表相同颜色的颜色的 Colour 实例来自己进行比较。

Answer 2

您可以使用以下

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

当所选值更新时，您将在 someFunction

中进行处理

下拉列表 - 按值绑定模型 - angular 2

Dropdown list - model binding by value - angular 2

javascript

angular2-forms

angular