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

【问题标题】：Angular5 - use key/value pair for select optionAngular5 - 使用键/值对选择选项
【发布时间】：2018-03-13 15:33:31
【问题描述】：

我已经开始使用 angular5，我正在尝试获取选择选项的值，并为其分配了 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 有效。

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

【问题讨论】：

标签： angular5 key-value ngfor

【解决方案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>

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

【讨论】：