使用角度 4 根据第一个下拉选择更改第二个下拉选项答案

【问题标题】：change second dropdown options based on first dropdown selection using angular 4使用角度 4 根据第一个下拉选择更改第二个下拉选项
【发布时间】：2019-02-26 13:18:06
【问题描述】：

component.html

<select data-placeholder="All Categories" class="category" value="category.category.categoryName">
  <option selected="selected" style="display:none">Select Category</option>
  <option class="select" *ngFor="let category of categories" value="category">
    {category.categoryName}}
  </option>
</select>
<select data-placeholder="All Cities" class="services location" value="category.categoryName">
  <option selected="selected" style="display:none">select type of services</option>
  <option *ngFor="let category of selected.categoryServicemodel; let i =
      index" value="category">{{category.serviceName}}
  </option>
</select>

component.ts

export class Component {
  categories: any[];
  services: any[];
  cities: any[];
  selected: any = {};

  constructor() {
    getAllCategories();
    {
      this.postService.getAllCategories()
        .subscribe(data => {
          this.categories = data.json();
          console.log(this.categories);
        });
    }

    getAllService();
    {
      this.postService.getAllServices()
        .subscribe(res => {
          this.services = res.json();
        });
    }
  }
}

[
  {
    "categoryId": 1,
    "categoryName": "Painting",
    "categoryDesc": "Painting of all types",
    "categoryServicemodel": [
      {
        "serviceId": 1,
        "serviceName": "Test12",
        "serviceDesc": "test12",
        "isActive": 1
      },
      {
        "serviceId": 3,
        "serviceName": "TESTINGEXAMPLE ",
        "serviceDesc": "TESTINGEXAMPLE Details 
        Information
        ",
        "isActive": 1
      },
      {
        "serviceId": 12,
        "serviceName": "New Painters",
        "serviceDesc": "office paintings ",
        "isActive": 2
      },
      {
        "serviceId": 11,
        "serviceName": "ABC Painters",
        "serviceDesc": "painting of all types",
        "isActive": 1
      }
    ],
    "active": 1
  },
  {
    "categoryId": 2,
    "categoryName": "string",
    "categoryDesc": "string",
    "categoryServicemodel": [
      {
        "serviceId": 2,
        "serviceName": "Test15",
        "serviceDesc": "test15",
        "isActive": 1
      }
    ],
    "active": 0
  },
  {
    "categoryId": 4,
    "categoryName": "carpenter",
    "categoryDesc": "Carpenter",
    "categoryServicemodel": [
      {
        "serviceId": 5,
        "serviceName": "Test Carpenter ",
        "serviceDesc": "Test carpenter Description",
        "isActive": 1
      }
    ],
    "active": 0
  }
]

我的问题是当我为 ex 选择第一个类别名称时。绘画（在我的回复中）该类别下的所有服务名称都应在第二个下拉列表中更改如果我再次选择第二个类别，那么该类别下的所有服务名称都应该在第二个下拉列表中可用

【问题讨论】：

请缩进您的代码。您的数据结构很棘手。当您选择一个选项时，获取值和filter 服务。但我不认为你能用这种数据结构有效地做到这一点。

标签： angular

【解决方案1】：

我对您的代码做了一些小改动。

在您的 html 中，我将“value”替换为“[value]”。在此代码中，选项值始终是“类别”字符串。如果你使用括号，你将引用一个变量的内容
我创建了一个 buildService 方法来填充您的服务数组
最后我在选择第一个组件时调用了 buildService

示例代码：https://stackblitz.com/edit/service-category

component.html

<select data-placeholder="All Categories" class="category" value="category.categoryName" [(ngModel)]="selected" (change)="buildServices($event)">
  <option selected="selected" style="display:none">Select Category</option>
  <option class="select" *ngFor="let category of categories" [value]="category.categoryId">
    {{category.categoryName}}
  </option>
</select>
<select data-placeholder="All Cities" class="services location" value="category.categoryName">
  <option selected="selected" style="display:none">select type of services</option>
  <option *ngFor="let service of services; let i =
      index" value="service.serviceId">{{service.serviceName}}
  </option>
</select>

component.ts

  public buildServices() {
    this.services = [];
    this.categories.forEach((category) => {
      if (category.categoryId == this.selected) {
        this.services = category.categoryServicemodel;
      }  
    }); 
  }

【讨论】：