角2 - 選択バインディング

Question

<select>で定義したいオプションをコンポーネントで選択します。しかし、私がコンソールでこれを印刷したいときは、私は定義されていません。私のコード：

component.html：

<div class="row"> 
    <div class="form-group col-md-6"> 
     <label>Select option:</label> 
     <select class="form-control" [(ngModel)]="selectedOption"> 
      <option *ngFor="let item of options" [value]="item">{{ item.display }}</option> 
     </select> 
    </div> 
</div> 

<button type="button" (click)="showOption()">Show selected option</button> 

component.ts：

selectedOption: any; 

sortOptions = [ 
    { 
     value: 'option1', 
     display: 'First option' 
    }, 
    { 
     value: 'option2', 
     display: 'Second option' 
    } 
]; 

showOption(): void { 
    console.log(this.selectedOption.value); 
} 

私は印刷console.log(this.selectedOption.value);をしようとしたとき、私は "未定義" を取得し、私はにconsole.logを印刷しよう（この.selectedOption）私は「[option option]」を得る

私はそれをどのように受け入れるのか分かりません。

Answer 1

代わり[value][ngValue]で試してみてください：

は

<select [(ngModel)]="selectedOption"> 
    <option value=""></option> 
    <option *ngFor="let item of options" [ngValue]="item"> 
    {{item.display}} 
    </option> 
</select> 

Answer 2

ます。また、この使用することができます。すべての種類の文字列値のため

<select [(ngModel)]="selectedOption"> 
    <option value=""></option> 
    <option *ngFor="let item of sortOptions" [value]="item.id"> 
    {{item.display}} 
    </option> 
</select> 

[値]と[ngValue]を