Question

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

我是角色的新手并理解逻辑，但是我在使用某些选项填充该下拉列表时遇到了问题。以下代码显示在框中没有选项的页面上。

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

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

Answer 2

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

恕我直言应该是：

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

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

2 个答案: