navigationend - angular 2: unir el objeto al menú desplegable y seleccionar el valor según un evento

router events angular 6

Question

He creado un menú desplegable que tiene proveedores vinculados a él como un objeto.

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

Tengo una grilla en la parte superior de este menú desplegable, donde selecciono los valores y los agrego en la cuadrícula de la tabla.

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

la relación tiene supplierName así como supplierId. Estoy intentando seleccionar el valor del evento desplegable en Editar pero no puedo hacer que funcione. a continuación están mis intentos hasta ahora.

Primer intento:

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

Segundo intento:

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

Tercer intento:

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

¿Alguna idea de cómo puedo lograr eso? a continuación está la captura de pantalla ...

También he creado un simple plunker ... https://plnkr.co/edit/Z11peGQmzYuwY6l6U9Ri?p=preview

Answer 1

El problema es que está configurando el valor de la opción para que sea un Objeto, por lo que cuando establece el valor de relación seleccionado necesita establecer el mismo objeto exacto (no una representación similar) para que ngModel sepa exactamente qué Opción establecer como seleccionado. Por ejemplo, este tenedor de tu 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? */
  }
}

Utiliza el nombre de la relación, busca en la lista de proveedores y luego configura el Proveedor seleccionado con el nombre correcto.

Aunque no me gusta establecer el valor de las Opciones para un Objeto. Si tuviera que diseñarlo, preferiría usar las ID como el valor de la opción, sería mucho más fácil el código.

Answer 2

Parece que Angular2 utiliza objetos de referencia, en lugar de propiedades, por lo que si haces esto, funcionará:

private onEdit(relationship: Relationship): void {
  this.selectedSupplier = this.suppliers.find(supplier => supplier.id === relationship.supplierId);
}

Debe pasar exactamente el mismo objeto de la selección.