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.