Question

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

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

此处选择列表绑定到“颜色”＆＃39;汽车的财产。

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

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

  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    
    }

这是一个显示问题的傻瓜。只需在这些线之间切换即可说明问题。

this.car.colour = this.colours [1]; //作品

this.car.colour = new Color（1，＆＃39; Green＆＃39;）; //失败

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

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

此致

史蒂夫

更新

我通过设置模型＆＃39; superPower＆＃39;来解决我的用例问题。属性到用于填充下拉列表的列表中的匹配项。

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

中处理此问题

下拉列表 - 按值分类的模型 - 角度2

2 个答案: