html - Angular2 - 填充组合框/下拉列表

Question

我有一个名为周选择器的组件。该组件的目的是允许用户选择他们希望使用/查看的一周。

我是 Angular 的新手并且理解其中的逻辑，但是我无法使用某些选项填充该下拉列表。以下代码显示在一个页面上，框内没有任何选项。

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

对于单向绑定(bind)，请使用此选项，因为您希望监视选择更改而不是仅单击:我假设您想在 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)
}

对于双向数据绑定(bind)，你可以使用这个:

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

要详细了解 Angular 中的数据绑定(bind)类型，consider reading my post about this topic .