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

【问题标题】：Angular2 - Populating a combobox/dropdown listAngular2 - 填充组合框/下拉列表
【发布时间】：2017-03-22 11:04:48
【问题描述】：

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

我是 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() {
 }

}

【问题讨论】：

标签： html angular typescript

【解决方案1】：

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

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

【讨论】：

你不是说 value={{value.value}}> 吗？

【解决方案2】：

如果您的代码是精确复制粘贴，请考虑在 HTML 模板中为 option 标记删除额外的 >。

恕我直言，应该是：

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

【讨论】：