Angular2 - コンボボックス/ドロップダウンリストへの入力

Question

week-selectorというコンポーネントがあります。このコンポーネントの目的は、ユーザーが作業する/表示する週を選択できるようにすることです。

私は新しい角度を持ち、ロジックを理解していますが、そのドロップダウンリストにいくつかのオプションを設定するのに問題があります。ボックス内にオプションのないページに次のコードが表示されます。

import { Component, OnInit, Input, Output } from '@angular/core'; 
import{EventEmitter} from '@angular/core'; 

export class DropdownValue { 
value:string; 
label:string; 

constructor(value:string,label:string) { 
this.value = value; 
this.label = label; 
} 
} 

@Component({ 
selector: 'app-week-selector', 
template: 
` 
<form class = "ui small form segment"> 
<div id="WeekSubmission"> 
<h1> Please enter the week you are in: </h1> 

<select> 
<option> *ngFor="value of values" (click)="selectItem(value.value)"> {{value.label}}"> 
{{value}} 
</option> 
</select> 

</div> 
</form> 
` 
}) 

export class WeekSelectorComponent implements OnInit { 
values:DropdownValue[]; 

@Output() 
select:EventEmitter<string>; 

constructor() { 
this.values = [ new DropdownValue('Team','Liverpool')]; 
this.select = new EventEmitter(); 
} 

selectItem(value){ 
this.select.emit(value) 
} 

ngOnInit() { 
} 

} 

Answer 1

あなたのコードは正確なコピーペーストである場合には、optionタグ用のHTMLテンプレート内の余分な>を削除することを検討。私見

それは次のようになります。あなたが代わりの選択の変更を監視したいと

<option *ngFor="value of values" (click)="selectItem(value.value)"> 
{{value.label}} 
</option> 

Answer 2

は、ワンウェイバインディングの使用については、これだけクリックしてください： を私はあなたがUIやレコードにvalue.labelを表示したいと思い仮定します値と同じ。この値は要件に応じて変更できます。

<select (change)="selectItem($event.target.value)"> 
    <option *ngFor="let value of values" value={{value.label}}>{{value.label}}</option> 
</select> 

// code 
selectItem(value){ 
this.select.emit(value) 
} 

データバインディング双方向の場合、あなたはこれを使用することができます。

<select [ngModel]="selectedValue" (ngModelChange)="selectItem($event)"> 
    <option [value]="value.label" *ngFor="let value of values">{{value.label}}</option> 
</select> 

データは、角度でconsider reading my post about this topicをバインディングタイプについて詳細に読むには。