Angular2 Valor predeterminado para la etiqueta de selección - angular, html-select

Estoy tratando de establecer un valor predeterminado para mi etiqueta "seleccionar" en angular2 de acuerdo con un modelo

Aquí está mi código:

HTML

<div>
<label>Agence: </label>
<select [(ngModel)]="candidat.agence">
<option *ngFor="let agence of agences" [ngValue]="agence">{{agence.nom}}</option>
</select>
</div>

COMPONENTE

export class CandidatDetailComponent implements OnInit {
@Input()
candidat: Candidat;

agences: Agence[];

constructor(
private agenceService: AgenceService,
) {}

ngOnInit(): void {
this.agenceService.getAgences().then(agences => this.agences = agences);
}
}

Agencia

export class Agence {
id: number;
nom: string;
}

CANDIDAT

export class Candidat {
id: number;
nom: string;
agence: Agence;
}

Los atributos de la candidata se recuperan de otro componente.

Cuando se muestra el div, el valor predeterminado agence.nom no está establecido

¿Alguien tiene una idea? Gracias !!!

Respuestas

2 para la respuesta № 1

Primero el select debe tener name atributo:

<select [(ngModel)]="candidat.agence" name="WHATEVER">

Basado en code mostrado, el enlace debería ocurrir automáticamente ... tal vez el candidat.agence tiene algunos propiedad diferente de agence (de agences formación)

De todos modos, para configurar el candidat, Puedes hacerlo:

ngOnInit(): void {
this.agenceService.getAgences().then(agences => this.agences = agences);

if (this.candidat && this.candidat.agence) {
this.candidat.agence = this.agences.find(agence => agence.name === this.candidat.agence.name);
}
}

---

0 para la respuesta № 2

Encontré una solución fea:

ngOnChanges(): void {
if (this.candidat) {
for (let agence of this.agences) {
if (this.candidat.agence.nom == agence.nom) {
this.candidat.agence = agence;
}
}
}

Esto establece la agence de la candidata a un objeto definido en la lista

¿Hay una forma más limpia de hacerlo?

---