Angular5 - 使用键/值对选择选项

Question

我已经开始使用angular5了，我正在尝试获取一个select选项的值，并且它已分配ID onChange。

组件

import { Component, OnInit, EventEmitter } from '@angular/core';
// Services
import { LookupDataService } from '../../../service/lookup-data.service';


@Component({
  selector: 'diversity-dropdown',
  templateUrl: './diversity-dropdown.component.html',
  providers: [LookupDataService]
})
export class DiversityDropdownComponent implements OnInit {

  diversityForm: IDiversityForm[];
  title = 'Lookup data';
  selectedDiversity = '';

  constructor(private readonly lookupDataService: LookupDataService) { }

  ngOnInit() {
    this.lookupDataService.getDiversityForm().subscribe((diversityForm: IDiversityForm[]) => {
      this.diversityForm = diversityForm;
      console.log(diversityForm);

      }
    );
  }

  onChange($event) {
    console.log($event);
  }

}

查看

<div *ngFor='let section of diversityForm'>
  <span class="label label-default">{{section.labelText}}</span>

<select (change)="onChange($event)" ng-model="">
<<option *ngFor='let dropdown of section.lookupDropdowns' id="{{dropdown.labelText}}" value="{{dropdown.value}} {{dropdown.labelText}}">{{dropdown.value}}</option>
</select>

  <br />
</div>

数据

我尝试了$ event.target.id，但在控制台中它是一个空字符串。但是，$ event.target.value可以正常工作。

有没有一种简单的方法可以做我想做的事情？

Answer 1

<强> Stackblitz demo here

您应该以这种方式使用select：

HTML：

<select [(ngModel)]="newGovId.first_id_type" (change)="function($event)">
      <option [ngValue]="null">Select something</option>
      <option *ngFor="let option of options"
              [ngValue]="option.value" [innerHtml]="option.text"></option>
</select>

每个选项的上下文应该在您循环的变量中。