Question

<select class="form-control" type="text" required  (change)="onChangeLov($event)">>
      <option value=""></option>
      <option *ngFor ="let contact of contacts">{{contact.id}} - {{contact.name}}, {{contact.ptechnologyName}}, {{contact.mainlocationName}}  </option>
</select>

我有这个我想要的是从ngFor发送onChangeLove($event) contact.id ...任何建议我该怎么做？

我使用角度2

Answer 1

您可以将id放在选项的value属性中。当您选择一个选项时，它将作为（更改）事件发射器发出的事件的目标发送。

您可以通过event.target ['value']在函数中获取该值。这是一个例子：

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

@Component({
  selector: 'example',
  template: `

  <select class="form-control" type="text" required  (change)="onChange($event)">>
        <option value="{{ contact.id }}"
            *ngFor ="let contact of contacts">
            {{contact.id}} - {{contact.name}}
        </option>
  </select>  
  `
})

export class ExampleComponent implements OnInit {
  constructor() { }

  ngOnInit() { }

  contacts = [
    {id: 1, name: 'one'},
    {id: 2, name: 'two'},
    {id: 3, name: 'three'},
    {id: 4, name: 'four'}    
  ];

  onChange(e) {
    console.log('e: ', e.target['value']);
  }
}

Answer 2

为巡视选择添加模型，例如：myModel。并在您的选项中添加ngValue，以便所选模型可以获得它的价值。

<select class="form-control" [(ngModel)]="myModel" required (ngModelChange)="onChangeLove($event)">>
            <option value=""></option>
            <option *ngFor="let contact of contacts" [ngValue]="contact.id">{{contact.id}} - {{contact.name}}, {{contact.ptechnologyName}}, {{contact.mainlocationName}}</option>
</select>

在组件中，只需：

onChangeLove() {
     console.log(this.myModel);
}

在更改时选择发送ID？

2 个答案: