Question

我正在使用ASP.NET Core 2.0和Visual Studio 2017 Angular的Web应用程序模板开发Angular 2应用程序。

当用户更改选择时，我不知道如何从选择中获取所选值。

这是law.component.html：

<p *ngIf="!laws"><em>Loading...</em></p>
Legislaciones:&nbsp;
<select #l (change)="lawChanges(l.value)">
    <option></option>
    <option *ngFor="let law of laws" [ngValue]="law">{{law.name}}</option>
</select>

这是law.component.ts：

import { Component, Inject, Output, EventEmitter } from '@angular/core';
import { Http, RequestOptions, Headers } from '@angular/http';

@Component({
    selector: 'law',
    templateUrl: './law.component.html'
})

export class LawComponent {
    public laws: Law[];

    @Output()
    change: EventEmitter<number> = new EventEmitter<number>();

    constructor(private http: Http,
        @Inject('BASE_URL') private baseUrl: string) {

        http.get(baseUrl + 'api/Law').subscribe(result => {
            this.laws = result.json() as Law[];
        }, error => console.error(error));
    }

    lawChanges(selectedLaw: Law) {
        console.log("selected law: " + selectedLaw.value + " " + selectedLaw.name + ".");
        this.change.emit(selectedLaw.value);
    }
}

interface Law {
    value: number;
    name: string;
}

这就产生了它：

<select>
    <option></option><!--bindings={"ng-reflect-ng-for-of": "[object Object],[object Object"}-->
    <option ng-reflect-ng-value="1">China</option>
    <option ng-reflect-ng-value="2">Korea</option>
    <option ng-reflect-ng-value="3">European</option>
</select>

这是角度版本（ng --version）：

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / ? \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.4.4
node: 6.11.3
os: win32 x64

这是控制器返回的JSON：

[
    {
        "value": 1,
        "name": "China"
    },
    {
        "value": 2,
        "name": "Korea"
    },
    {
        "value": 3,
        "name": "European"
    }
]

在控制台我得到：

selected law: China .

似乎价值是空的。

如何获取所选值？我认为在定义select时我做错了，但是我发现了很多具有相同语法的例子。

顺便说一下，我已经从SO answer找到了如何做到这一点。

Answer 1

尝试将l.value更改为$event：

 <select (change)="lawChanges($event)">

然后

lawChanges(event : any) {
   let selectedLaw : any = event.target.value;
   console.log("selected law: " + selectedLaw.value + " " + selectedLaw.name + ".");
   this.change.emit(selectedLaw.value);

}

并在<option>中将ngvalue更改为value：

<option *ngFor="let law of laws" [value]="law">{{law.name}}</option>

希望有所帮助：）

Answer 2

你可以试试这段代码

//在html中

<select #l="ngModel" [(ngModel)]="lawModel" name="lawName"  (change)="lawChanges(lawModel)">
    <option></option>
    <option *ngFor="let law of laws" [ngValue]="law">{{law.name}}</option>
</select>

//在ts中将lawModel声明为变量;

lawModel:any;

Answer 3

这是我修复它的方法：

<p *ngIf="!laws"><em>Loading...</em></p>
Legislaciones:&nbsp;
<select #selectedLaw (change)="lawChanges(selectedLaw.value)">
    <option></option>
    <option *ngFor="let law of laws" [value]="law.value">{{law.name}}</option>
</select>

使用Angular 2从onChange事件中选择select中的选定值

3 个答案: