Angular 4 - 如何获取从我的组合框中选择的值？

Question

我是 Angular 新手，在尝试获取从组合框中选择的选项的值时遇到了麻烦。我想要做的是将所选内容的值放入名为 selectedEmployee 的变量中，然后使用该值将不同的值打印到表中。任何帮助表示赞赏！提前致谢！

这是我的 emp-info.ts：

export class EmpInfo {
    EmpKey: number;
    EmpID: string;
    Firstname: string;
    LastName: string;
    EmpStat: string;
    StartDate: Date;
    AdjustedStart: Date;
    Anniversary: number;
    PTOYear: number;
    STDLTD: number;
    Uncharged: number;
    ETOEarned: number;
    ETORequests: number;
    ETORemaining: number;
    PTOBase: number;
    PTOCarry: number;
    PTOBorrowed: number;
    PTOBalance: number;
    PTORequests: number;
    PTORemaining: number;
}

这是我的 emp-info.service.ts：

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';

import 'rxjs/add/operator/toPromise';


import { EmpInfo } from './emp-info';

@Injectable()

export class EmpInfoService {
    private empInfoUrl = 'api/EmpInfo';

    constructor(private http: Http) { }

    getEmpInfos(): Promise<EmpInfo[]> {
        return this.http.get(this.empInfoUrl)
            .toPromise()
            .then(this.extractData)
            .catch(this.handleError);
    }

    private extractData(res: Response) {
        let body = res.json();
        return body || {};
    }


    private handleError(error: any): Promise<any> {
        console.error('An error occurred', error);
        return Promise.reject(error.message || error);
    }
}

这是我的 tracker.component.ts：

import { Component, OnInit } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { SummaryComponent } from './summary.component';
import { EmpInfoService } from './emp-info.service';
import { EmpInfo } from './emp-info'; 

@Component({
    selector: 'pto-tracker',
    templateUrl: `./tracker.component.html`,
    styleUrls: ['./tracker.component.css']
})

export class TrackerComponent implements OnInit{
    empInfo: EmpInfo[];
    isHidden: boolean = false;

    constructor(private empInfoService: EmpInfoService) { }

    getEmpInfo(): void {
        this.empInfoService.getEmpInfos().then(
            empInfo => this.empInfo = empInfo
        );
    }

    ngOnInit(): void {
        this.getEmpInfo();
    }

    toggleSummary(): void {
        this.isHidden = !this.isHidden;
    }
}

这是我的 tracker.component.html，我想在其中获取从 empName 组合框中选择的值并将其设置为变量 selectedEmployee

<div class="row">
  <div [ngClass]="{'col-xs-12':isHidden === true, 'col-xs-7': isHidden !== false}" style="background-color:red;">
    <button class="form-control" style="width:150px;" (click)="toggleSummary()">Open Summary</button>
    <select id="empName">
      <option selected="selected" disabled>Employee Name...</option>
      <option *ngFor="let emp of empInfo" [value]="emp.EmpKey">{{emp.EmpID}}</option>
    </select>
    <select id="PTOtype">
      <option selected="selected" disabled>Type of PTO...</option>
      <option value="PTO">PTO</option>
      <option value="ETO-Earned">ETO - Earned</option>
      <option value="ETO-Used">ETO - Used</option>
      <option value="STDLTD">STD/LTD</option>
      <option value="Uncharged">Uncharged</option>
    </select>
    <table>
      <thead>
        <tr>
          <th>Date</th>
          <th>Full/Half</th>
          <th>Hours</th>
          <th>Scheduled?</th>
          <th>Notes</th>
          <th>In P/R?</th>
        </tr>
        <tr>
        </tr>
      </thead>
    </table>
  </div>
  <div *ngIf="isHidden" class="col-xs-5">
        <pto-summary></pto-summary>
  </div>
</div>

谢谢！

Answer 1

您需要为此使用模型：

<select id="empName" [(ngModel)]="selectedEmployee" (ngModelChange)="employeeSelected($event)">
      <option selected="selected" disabled>Employee Name...</option>
      <option *ngFor="let emp of empInfo" [value]="emp.EmpKey">{{emp.EmpID}}</option>
</select>

在您的组件中声明它：

public selectedEmployee; // You can specify the type: string, Class, number, etc. Example: `public selectedEmployee: string;`.

如果你愿意，你可以处理选择事件：

// Here we handle the model's change event. 
  employeeSelected(event) {
    console.log('selected employee: ' + event);
  }

一些文档：NgModel。