Angular2 ngFor用於多個選擇框。 下一步選擇獲取值

Question

我創建了一個視圖，可以在其中選擇多個人。 來自同一個人。 （我不想使用多選）

我似乎沒有得到的是：在選擇框1中選擇一個值時，將設置下一個選擇框的值。 為什么會這樣？

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: `
        <select *ngFor="let selectedPerson of selectedPeople; let i = index;" (change)="selectChanged(i, $event.target.value)">
            <option></option>
            <option *ngFor="let person of people" [value]="person.id">{{ person.name }}</option>
        </select>

        <pre>{{ people | json }}</pre>
    `
})
export class AppComponent { 
    public people = <IPerson[]>[
        {id: 1, name: "Mike"},
        {id: 2, name: "Jacob"},
        {id: 3, name: "Ralph"},
        {id: 4, name: "name4"},
        {id: 5, name: "name5"},
        {id: 6, name: "name6"},
        {id: 7, name: "name7"},
    ];
    public selectedPeople[];

    constructor(){
        this.selectedPeople = Array(6).fill(<IPerson>{ });
    }

    selectChanged(index, value){
        let person = this.people.find((person: IPerson) => person.id == value);

        this.selectedPeople[index] = person;
    }
}

export interface IPerson{
    id: number,
    name: string
}

編輯：

這行this.selectedPeople[index] = person; 導致此問題。

Answer 1

如下更改HTML並檢查：

<select *ngFor="let selectedPerson of selectedPeople;let i = index;" (change)="selectChanged(i, $event.target.value)">
  <option></option>
  <option *ngFor="let person of people" [attr.selected]="selectedPerson === person.id" [value]="person.id">{{ person.name }}</option>
</select>

Answer 2

在選擇上使用*ngFor顯然會引起奇怪的問題。 您應該將select包裝在div 。

<div *ngFor="let selectedPerson of selectedPeople; let i = index;">
    <select (change)="selectChanged(i, $event.target.value)" [value]="selectedPerson.id">
       <option></option>
       <option *ngFor="let person of people" [value]="person.id">{{ person.name }}</option>
    </select>
</div>
<pre>{{ people | json }}</pre>

我不確定這是否可以視為angular2中的錯誤，還是因為使用*表達式時進行了模板化。