Question

我需要有关此select的帮助，它已填充db，并且在更改项目时需要选择该项目。

<select class="custom-select col-md-12" id="operation" name="operation" formControlName="operation">
  <option *ngFor="let operation of operations" [ngValue]="operation.id" (ngModelChange)="show(operation)">{{ operation.value}}</option>
</select>

show(value){
   ...
}

我已经尝试过使用(change)和[(ngModel)]，但是它不起作用。

Answer 1

更改事件应位于<select>标记中：

<select class="custom-select col-md-12" id="operation"
(ngModelChange)="show($event)" name="operation" formControlName="operation">
  <option *ngFor="let operation of operations" [ngValue]="operation.id" \>
  {{ operation.value}}
  </option>
</select>

Answer 2

如果您绑定formcontrolName，则无需绑定html中的change事件。您可以在ts本身中订阅change事件。但是，如果您想通过html绑定更改事件，请删除formcontrolName绑定并在html中绑定更改事件。

组件

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  operations = [{ id: 1, value: 'test' }, { id: 2, value: 'test2' }, { id: 3, value: 'test3' }];

  show(event){
    console.log(event.target.value);
  }
}

<select class="custom-select col-md-12" id="operation" name="operation" (change)="show($event)">
  <option *ngFor="let operation of operations" [value]="operation.id" >{{ operation.value}}</option>
</select>

示例： StackBlitz

下拉式变更未触发

2 个答案: