Question

我有2个选项集（选项列表），我想根据其他选项集填充其中一个。例如，如果我在ts文件中有数组：

   carsArray: { id: number, name: string }[] = [
    { "id": 1, "name": "Car1" },
    { "id": 2, "name": "Car2" },
    { "id": 3, "name": "Car3" }
  ];

  carModulesArray:{ id: number, carId:number ,name: string }[] = [
    { "id": 1, "carId":1, "name": "Module1" },
    { "id": 2, "carId":1, "name": "Module2" },
    { "id": 3, "carId":1,"name": "Module3" },
    { "id": 4, "carId":2,"name": "Module4" },
    { "id": 5, "carId":3,"name": "Module5" }
  ];

并在html模板中

  <select id='cars'>
      <option *ngFor="let c of carsArray" 
      value="{{c.id}}">{{c.name}}</option>
    </select>

    <select id='modules'>
        <option *ngFor="let m of carModulesArray" 
        value="{{m.id}}">{{m.name}}</option>
      </select>

如何通过第一个选项列表（汽车）动态填充第二个选项列表（模块）所以在用户选择汽车1之后，他只能看到模块1,2和3 如果他选择车2（或3），他会看到模块2（或模块3）

提前感谢您的帮助

Answer 1

在Alex的帮助下，这是我写的代码，还有改进的余地，但我会用HTML：

<div class="form-group">
                <label for="carsId" class="col-sm-2 control-label">Cars</label>
                <div class="col-sm-10">
                  <select id='carsId' (change)="onCarsChange($event)">
                    <option *ngFor="let c of carsArray" 
                    value="{{c.id}}">{{c.name}}</option>
                  </select> 
                </div>
              </div>

              <div class="form-group">
                <label for="moduleId" class="col-sm-2 control-label">Cars</label>
                <div class="col-sm-10">
                  <select id='moduleId'>
                    <option *ngFor="let m of filteredCarsModule" 
                    value="{{m.id}}">{{m.name}}</option>
                  </select> 
                </div>
              </div>

并在typescript文件中 filteredCarsModule：{id：number，carId：number，name：string} [];

   carsArray: { id: number, name: string }[] = [
    { "id": 1, "name": "Car1" },
    { "id": 17, "name": "Car2" },
    { "id": 3, "name": "Car3" }
  ];

  carModulesArray:{ id: number, carId:number ,name: string }[] = [
    { "id": 1, "carId":1, "name": "Module1" },
    { "id": 2, "carId":1, "name": "Module2" },
    { "id": 3, "carId":1,"name": "Module3" },
    { "id": 4, "carId":17,"name": "Module4" },
    { "id": 5, "carId":3,"name": "Module5" }
  ];


  ngOnInit() {
    this.filteredCarsModule = this.getCarsModuleByType(1);
  }

  onCarsChange(carValue) {
    this.filteredCarsModule = this.getCarsModuleByType(carValue.target.value);
  }

  getCarsModuleByType(carValue):{ id: number, carId:number ,name: string }[]
  {
    return this.carModulesArray.filter(module=>module.carId==carValue);
  }

Answer 2

由于您正在使用数组，因此可以使用filter()方法清除列表中不需要的选项。

您只需根据所选值过滤一个列表或另一个列表。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

动态填充由angular4中的值设置的选项

2 个答案: