Angular 2中获取select组件内car.fourDoors选项数量的方法

嘿，这个问题其实很简单，完全不用从DOM里折腾，Angular是数据驱动的，直接从你绑定的数据源里拿就行～

给你几个实用的思路：

1. 直接获取数组长度（最推荐） #

因为car.fourDoors是你用来生成option的数组，它的长度就是对应的选项数量。不管是在组件类的方法里用，还是在模板里展示，直接用car.fourDoors.length就搞定了：

组件类里使用（比如在carSelected方法中）：

export class YourComponent {
  car = {
    fourDoors: [...], // 你的四门车数据
    twoDoors: [...]   // 你的两门车数据
  };

  carSelected(selectedIndex: number) {
    // 直接拿到fourDoors对应的选项数量
    const fourDoorsOptionCount = this.car.fourDoors.length;
    
    // 举个例子：判断选中的是不是四门车的选项
    // 注意第一个option是空的，所以四门车选项的索引范围是1到fourDoorsOptionCount
    if (selectedIndex > 0 && selectedIndex <= fourDoorsOptionCount) {
      console.log('选中的是四门车选项');
    }
    
    // 这里可以用fourDoorsOptionCount做你需要的其他操作
  }
}

模板里直接展示数量：

如果需要在页面上显示四门车的选项数量，直接用插值表达式：

<p>四门车选项总数: {{car.fourDoors.length}}</p>

2. 优化模板的change事件绑定 #

你之前在模板里直接赋值index = $event.target.selectedIndex的写法可以简化，直接把选中索引传给方法就行：

<select class="form-control" (change)="carSelected($event.target.selectedIndex)" required>
  <option></option>
  <option *ngFor="let oneCar of car.fourDoors">{{oneCar.name}}</option>
  <option *ngFor="let oneCar of car.twoDoors">{{oneCar.name}}</option>
</select>

为什么不推荐从DOM获取？ #

Angular的核心思想是数据驱动视图，直接操作数据源（比如car.fourDoors）比从DOM里去计算数量更可靠，也更符合Angular的开发习惯。如果以后你的DOM结构变化（比如新增或删除option），只要数据源没变，这个数量就不会出错，而从DOM获取的话很容易因为结构变化出问题。

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