Dropdown-Liste - Modell Bindung durch Wert - Winkel-2

Ich habe eine Seite, die es einem Benutzer ermöglicht, zu aktualisieren, die Farbe eines Autos. Es gibt zwei api-Aufrufe, die eine, um wieder die Auto-json-Objekt und eines zum Befüllen eines drop-down-Liste von Farben.

Mein Problem ist, dass Winkel 2 zu tun scheint-Modell verbindlich über Referenz und nicht der Wert. Dies bedeutet, dass, obwohl die Farbe 'grün' kann festgelegt werden, auf das Auto, die Farbe 'grün' wird nicht selektiert werden, die in der drop-down-Liste, auch wenn es entspricht, wie das Objekt kommt von einem anderen api-Aufruf.

Hier der select-Liste gebunden ist, um die "Farbe" - Eigenschaft des Autos.

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

Wenn ich das Modell in die back-end, wenn ich die Farbe des Autos haben den gleichen Wert-Objekt (in diesem Fall grün), die drop-down ist nicht ausgewählt. Allerdings, wenn ich es mit der gleichen Instanz, aus der Werte-Liste verwendet werden zum binden der Liste ausgewählt ist, als erwartet.

  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    
    }

Hier ist ein plunker zeigt das Problem. Wechseln Sie einfach zwischen diesen Linien zur Verdeutlichung des Problems.

diese.Auto.Farbe = diese.Farben[1]; //Funktioniert

diese.Auto.Farbe = new Farbe(1, 'Grün'); //schlägt Fehl,

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

Wie bekomme ich eckige zu vergleichen, Objekte von Wert, nicht die Referenz, wenn eine Bindung, die in dieser Weise?

Hinsichtlich

Steve

Update

Löste ich in meinen use-case durch die Einstellung der Modelle 'Supermacht' - Eigenschaft des übereinstimmenden Elements in der Liste verwendet, zum Auffüllen der dropdown-Liste aus.

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];
        });
    });
}