Angular2 * ngDla listy wyboru, ustaw aktywną na podstawie ciągu znaków z obiektu

Question

Próbuję użyć ngFor w wybranej liście DropDownList. Załadowałem opcje, które powinny znaleźć się na liście rozwijanej.

Kod można zobaczyć tutaj:

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

Na podstawie tego kodu, to tworzy listę rozwijaną, które wyglądają jak tego obrazu.

Problemem jest to, że chcę, aby ustawić jeden z nich „Mr lub mrs” jako aktywnego opartego na passenger.Title który jest ciągiem albo „pan” lub „pani”.

Każdy może pomóc zobaczyć, co robię źle tutaj?

Answer 1

To powinno działać

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

nie jestem pewien, że attr. część jest konieczne.

Answer 2

Sprawdź to w this demo fiddle, zmień listę rozwijaną lub wartości domyślne w kodzie.

Ustawienie passenger.Title z wartością równą title.Value powinno działać.

Widok:

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

maszynopis używane:

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")]; 

}