select - example - Angular2*ngFor en la lista de selección, establezca activo en función de la cadena desde el objeto

selected angular 4

Question

Estoy tratando de usar el ngFor en mi DropDownList seleccionado. Se han cargado las opciones que deberían estar en el desplegable.

El código que ves aquí:

<div class="column small-12 large-2">
<label class="sbw_light">Title:</label><br />
<select [(ngModel)]="passenger.Title">
<option *ngFor="#title of titleArray" [value]="title.Value">{{title.Text}}</option>
</select>
</div>

Basado en este código, produce un menú desplegable que se parece a esta imagen.

El problema es que quiero establecer a uno de ellos "Señor o Sra." Como activo basado en el passenger.Title que es una cadena ya sea "Sr." o "Sra.".

Cualquiera puede ayudar a ver lo que estoy haciendo mal aquí?

Answer 1

Compruébelo en este violín de demostración , siga adelante y cambie el menú desplegable o los valores predeterminados en el código.

Configuración del passenger.Title . title.Value con un valor que equivale a un title.Value . El title.Value debería funcionar.

Ver:

<select [(ngModel)]="passenger.Title">
<option *ngFor="let title of titleArray" [value]="title.Value">
{{title.Text}}
</option>
</select>

TypeScript utilizado:

class Passenger {
constructor(public Title: string) { };
}
class ValueAndText {
constructor(public Value: string, public Text: string) { }
}
...
export class AppComponent {
passenger: Passenger = new Passenger("Lord");
titleArray: ValueAndText[] = [new ValueAndText("Mister", "Mister-Text"),
new ValueAndText("Lord", "Lord-Text")];
}

Answer 2

Esto debería funcionar

<option *ngFor="let title of titleArray"
[value]="title.Value"
[attr.selected]="passenger.Title==title.Text ? true : null">
{{title.Text}}
</option>

No estoy seguro del attr. La parte es necesaria.