I have created a dropdown which has suppliers bound to it as an object.
The problem is that you are setting the option value to be an Object, so when you set the selected relationship value you need to set the same exact object (not a similar representation of it) for the ngModel to know exactly which Option to set as selected. For example this fork of your plunker: https://plnkr.co/edit/VroxlTMkV30HbqB1DvYq.
onEdit(relationship){
let name:string = relationship.supplierName;
let found:boolean = false;
for (let i = 0; i < this.suppliers.length && !found; i++) {
let supplier:any = this.suppliers[i];
if (supplier.name === name) {
found = true;
this.selectedSupplier = supplier
}
}
/* if (!found) what to do? */
}
}
That uses the relationship's name, searches through the list of the suppliers, then sets the selectedSupplier to the one with the correct name.
I don't really like setting the value of Options to an Object, though. If I were to design it, I would prefer to use the IDs as the Option value, it would make the code a lot easier.
It seems Angular2 uses objects reference, instead of properties, so if you do this, it will work:
private onEdit(relationship: Relationship): void {
this.selectedSupplier = this.suppliers.find(supplier => supplier.id === relationship.supplierId);
}
You need to pass the exact same object from the select.