Angular2 * ngFor trong danh sách chọn, đặt hoạt động dựa trên chuỗi từ đối tượng

Question

Tôi đang thử sử dụng ngFor trên DropDownList đã chọn của mình. Đã tải trong các tùy chọn cần có trong trình đơn thả xuống.

mã bạn nhìn thấy ở đây:

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

Dựa trên mã này, nó tạo ra một danh sách thả xuống mà trông giống như hình ảnh này.

Vấn đề là tôi muốn thiết lập một trong số họ "Mr hoặc Mrs" là một hoạt động dựa trên passenger.Title mà là một chuỗi hoặc "Ông" hoặc "Bà".

Mọi thứ có thể giúp tôi xem những gì tôi đang làm sai ở đây?

Answer 1

này nên làm việc

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

Tôi không chắc chắn phần attr. là cần thiết.

Answer 2

Hãy khám phá trong this demo fiddle, tiếp tục và thay đổi menu thả xuống hoặc giá trị mặc định trong mã.

Đặt passenger.Title với giá trị bằng title.Value sẽ hoạt động.

Xem:

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

nguyên cảo sử dụng:

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

}