Angular 5中获取select选中值并传递给getCarModelsByBrand方法

嘿，我瞅了你的代码，发现有个小细节没处理对，导致选中的品牌值没法正确传递给getCarModelsByBrand方法，咱们来快速修正它：

问题所在 #

你当前的<option>标签里，value=brand这部分会把字符串"brand"（而不是循环里的brand变量值）作为选中值传递给方法，这就是核心问题。

两种修正方案 #

方案1：使用插值表达式绑定value

把option标签改成下面这样，用{{brand}}来动态绑定品牌值：

<div class="form-group">
  <select (change)="getCarModelsByBrand($event.target.value)" class="form-control" id="sel1">
    <option selected disabled value="">Pasirinkite</option>
    <option *ngFor="let brand of brands" value="{{brand}}">{{brand}}</option>
  </select>
</div>

方案2：使用Angular属性绑定（推荐）

这是Angular更推荐的写法，用方括号[value]直接绑定变量，代码更清晰：

<div class="form-group">
  <select (change)="getCarModelsByBrand($event.target.value)" class="form-control" id="sel1">
    <option selected disabled value="">Pasirinkite</option>
    <option *ngFor="let brand of brands" [value]="brand">{{brand}}</option>
  </select>
</div>

额外验证建议 #

为了确认值已经正确传递，你可以在组件的getCarModelsByBrand方法里加个日志输出：

getCarModelsByBrand(brand: string) {
  console.log('当前选中的品牌：', brand);
  // 这里写你的车型获取逻辑，比如发起HTTP请求等
}

特殊情况处理（如果品牌是对象） #

要是你的brands数组里存的是对象（比如{id: 1, name: '大众'}这种），那得用[ngValue]代替[value]，因为value只能传递字符串，ngValue支持传递对象：

<option *ngFor="let brand of brands" [ngValue]="brand">{{brand.name}}</option>

对应的方法也要调整参数类型：

getCarModelsByBrand(brand: {id: number, name: string}) {
  console.log('选中的品牌对象：', brand);
}

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