0
533
ViewsAngular2 * ngFor en la lista de selección, establecer activo en función de la cadena del objeto
Estoy tratando de usar ngFor en mi DropDownList seleccionado. Haber cargado las opciones que deberían estar en el menú 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 uno de ellos "Sr. o Sra." como el activo en función del passenger.Title . Título que es una cadena de "Sr." o "Sra.".
Cualquiera puede ayudar a ver lo que estoy haciendo mal aquí?
2 answers
Answer question0
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. parte es necesaria.
0
Compruébelo en este violín de demostración , continúe y cambie el menú desplegable o los valores predeterminados en el código.
Establecer el passenger.Title . Título con un valor que es igual a un título. title.Value debería funcionar.
Vista:
<select [(ngModel)]="passenger.Title"> <option *ngFor="let title of titleArray" [value]="title.Value"> {{title.Text}} </option> </select>Mecanografiado 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")]; }