angular 2 - vincular objeto ao menu suspenso e selecionar valor com base em um evento
Eu criei um menu suspenso que tem fornecedores vinculados a ele como um objeto.
<select class="form-control" name="supplier" required
[(ngModel)]="selectedSupplier" #supplier="ngModel">
<option *ngFor="let supplier of suppliers" [ngValue]="supplier">{{supplier.name}}</option>
</select>
Eu tenho uma grade no topo desse menu suspenso, onde seleciono os valores e os adiciono na grade da tabela.
<tr *ngFor="let relationship of relationships">
<td>{{relationship.supplierName}}</td>
<td>{{relationship.businessArea}}</td>
<td>{{relationship.contacts[0].name}}</td>
<td><a href="javascript:void(0)" (click)="onEdit(relationship)">Edit</a></td>
</tr>
O relacionamento tem supplierName e supplierId. Estou tentando selecionar o valor do evento suspenso onEdit, mas não consigo fazê-lo funcionar. abaixo estão minhas tentativas até agora.
Primeira tentativa:
private selectedSupplier: any;
private onEdit(relationship: Relationship): void {
this.selectedSupplier = {id: relationship.supplierId, name: relationship.supplierName};
}
Segunda tentativa:
private selectedSupplier: Dictionary;
private onEdit(relationship: Relationship): void {
this.selectedSupplier = new Dictionary(relationship.supplierId, relationship.supplierName);
}
export class Dictionary{
constructor(public id:number, public name:string){}
}
Terceira tentativa:
private selectedSupplier: any;
private onEdit(relationship: Relationship): void {
this.selectedSupplier.id = relationship.supplierId;
// this.selectedSupplier.id = 2;
}
alguma idéia de como conseguir isso? abaixo está a captura de tela ...
Eu criei um plunker simples também ...https://plnkr.co/edit/Z11peGQmzYuwY6l6U9Ri?p=preview