Ich habe ein Dropdown-Menü erstellt, an das Lieferanten als Objekt gebunden sind.

<select class="form-control" name="supplier" required
                            [(ngModel)]="selectedSupplier" #supplier="ngModel">
    <option *ngFor="let supplier of suppliers" [ngValue]="supplier">{{supplier.name}}</option>
</select>

Ich habe ein Raster oben auf dieser Dropdown-Liste, in dem ich die Werte auswähle und sie in das Tabellenraster hinzufüge.

<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>

relationship hat SupplierName sowie SupplierId. Ich versuche, den Wert des Dropdown-Ereignisses onEdit auszuwählen, aber es scheint nicht zu funktionieren. Unten sind meine bisherigen Versuche.

Erster Versuch

private selectedSupplier: any;
private onEdit(relationship: Relationship): void {
        this.selectedSupplier = {id: relationship.supplierId, name: relationship.supplierName};
    }

Zweiter Versuch

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){}
}

Dritter Versuch:

private selectedSupplier: any;
private onEdit(relationship: Relationship): void {
        this.selectedSupplier.id = relationship.supplierId;
     // this.selectedSupplier.id = 2;
    }

jede Idee, wie kann ich das erreichen? unten ist der Screenshot ...

Ich habe auch einen einfachen Plunker erstellt ...https: //plnkr.co/edit/Z11peGQmzYuwY6l6U9Ri? p = preview