"onChange" 事件未在组件中触发，html Angular

Question

我有这个 html 模板用于呈现数据库中所有医生的组件，以及作为下拉列表的颜色数组。当从下拉颜色列表中选择一个值时，应该触发 onChange 事件，并调用一个向数据库发送查询并相应地更改值的函数。问题是 onChange 事件没有触发，onclick 也没有触发。

代码如下：

<table id="colorsTable" border="2">
<tr>
  <th>Doctor</th>
  <th>Color</th>
  <th>New Color</th>
</tr>
<tr *ngFor="let doctor of doctors">
  <td>{{ doctor.fullname }}</td>
  <td>
    {{ doctor.color }}
  </td>
  <td>
    <select>
      <option
        *ngFor="let color of colors"
        [ngStyle]="{ backgroundColor: color }"
        (change)="changeColor($event)"
      >
        {{ color }}
      </option>
    </select>
  </td>
</tr>

这里是 component.ts 文件：

import {
Component,
Injectable,
EventEmitter,
NgModule,
OnInit,
Output,
} from "@angular/core";
import { element } from "protractor";
import { DoctorsService } from "../../../../../services/doctors.service";

@Component({
    selector: "doctor-color-settings",
    templateUrl: "./doctor-color-settings.component.html",
    styleUrls: ["./doctor-color-settings.component.scss"],
})
@Injectable()
export class DoctorColorSettingsComponent {
  public doctors: Array<any> = [];
  public colors: Array<any> = [
   "IndianRed",
   "LightCoral",
   "Salmon",
   "DarkSalmon",
   "LightSalmon",
   "Crimson ",
   "Red",
   "FireBrick",
   "DarkRed",
   "Pink",
   "LightPink",
   "HotPink",
   "DeepPink",
   "MediumVioletRed",
   "PaleVioletRed",
 ];
 constructor(private doctorsService: DoctorsService) {
  this.getDoctorsIntoTable();
 }

 private getDoctorsIntoTable() {
  this.doctorsService.getAllDoctors().then((res) => {
    if (!(res === null || (Array.isArray(res) && res.length === 0))) {
      this.doctors = res;
    }
  });
 }

changeColor(event: any) {

  alert("onchange event fired");
}

}

Answer 1

将您的侦听器放在 select 元素中。选项元素没有更改侦听器。

<select (change)="changeColor($event)">
      <option
        *ngFor="let color of colors"
        [ngStyle]="{ backgroundColor: color }"
        >
        {{ color }}
      </option>
    </select>

"onChange" 事件未在组件中触发，html Angular

"onChange" event not firing in component, html Angular

components

angular