Angular中能否通过(change)事件传递多个变量？

当然没问题！作为Angular新手，你可以通过几种简单的方式同时获取选中汽车的name和color，下面是两种最实用的方案：

另外先提个小细节：你HTML里的option标签结尾写错了，应该是</option>而不是/option>，这个小问题得修正，不然页面可能会出问题哦！

方法1：基于现有代码扩展，通过name匹配完整car对象 #

这种方法不需要大幅调整现有结构，直接在事件处理里从数组中查找对应的数据：

修改cars.component.ts中的changedCar方法 #

changedCar(event: any) {
  const selectedName = event.target.value;
  // 从已加载的cars数组中找到匹配name的car对象
  const matchedCar = this.cars.find(car => car.name === selectedName);
  
  if (matchedCar) {
    this.selectedName = matchedCar.name;
    this.selectedColor = matchedCar.color;
    console.log('选中车名:', this.selectedName, '对应颜色:', this.selectedColor);
  } else {
    // 处理未选中或找不到匹配项的情况
    this.selectedName = '';
    this.selectedColor = '';
  }
}

注意：这个方法依赖cars数组已经完成加载（你的ngOnInit里已经通过服务获取了数据，所以没问题），且每个汽车的name是唯一的，避免出现多个匹配结果。

方法2：使用Angular双向绑定（更推荐的Angular风格） #

这种方法直接绑定整个car对象，无需手动查找，更符合Angular的设计理念：

步骤1：修改cars.component.html #

<p>Select Car</p>
<select class="form-control" [(ngModel)]="selectedCar" (ngModelChange)="handleCarSelection()">
  <!-- 用[ngValue]绑定整个car对象，默认选项绑定null -->
  <option [ngValue]="null">Select Car</option>
  <option *ngFor="let car of cars" [ngValue]="car">{{car.name}}</option>
</select>

步骤2：修改cars.component.ts #

定义变量存储选中的car对象，并添加处理方法：

// 定义变量存储选中的car对象，类型匹配你的数据结构
selectedCar: {name: string, color: string} | null = null;
selectedName: string = '';
selectedColor: string = '';

handleCarSelection() {
  if (this.selectedCar) {
    this.selectedName = this.selectedCar.name;
    this.selectedColor = this.selectedCar.color;
    console.log('选中车名:', this.selectedName, '对应颜色:', this.selectedColor);
  } else {
    // 重置选中状态
    this.selectedName = '';
    this.selectedColor = '';
  }
}

额外优化：修正Car类型定义 #

目前你的database.service.ts里的Car类和实际返回的{name: "Jeep", color: "Black"}结构不匹配，建议改成接口来匹配数据结构：

export interface Car {
  name: string;
  color: string;
}

getCar(): Observable<Car[]> {
  const url = 'http://localhost:3000/car';
  const data = ({ });
  return this._http.post(url, data)
    .pipe(
      map((res) => {
        console.log(res);
        return res as Car[]; // 简洁的类型断言
      })
    );
}

这样TypeScript能更好地帮你检查类型，避免潜在的错误。

内容的提问来源于stack exchange，提问作者user68288