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);时，我得到了＃34;未定义＆＃34;当我尝试打印console.log（this.selectedOption）时，我得到了＃34; [选项选项]＆＃34;

我不知道如何解决它。

Answer 1

尝试使用[ngValue]代替[value]：

<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>

[value] 表示字符串值， [ngValue] 表示所有类型

Angular 2 - 选择绑定

2 个答案: