Angular2 ngFor複数の選択ボックス。次のselectは値を取得します

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を変更し、チェック

：

選択に *ngForを使用して

<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

は明らかに奇妙な問題が発生します。 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のバグと考えることができるか、それが理由*式を使用しているときに行うテンプレートのです。