如何基于角度4中的其他第一下拉值更改第二下拉值

Question

我有这样的回应

[
{
"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
 },
 {
"categoryId": 6,
"categoryName": "Telecommunications service provider",
"categoryDesc": "TSPs provide access to telephone and related communications services",
"categoryServicemodel": [
  {
    "serviceId": 4,
    "serviceName": "ABC providers",
    "serviceDesc": "Providing all types of networks",
    "isActive": 1
  }
],
"active": 0
  },

{
"categoryId": 40,
"categoryName": "Automobiles",
"categoryDesc": " testing vehicles",
"categoryServicemodel": [],
"active": 0
 }
  ]

然后我有一个选择字段

 <div class="main-search-input-wrap">
     <div class="main-search-input fl-wrap">
         <div class="main-search-input-item">

           <select data-placeholder="All Categories" class="category" value="category.category.categoryName">
              <option  selected="selected" style="display:none">Select Category</option>
              <option class="select" (click)="onSelect(category)" 
              *ngFor="let category of categories" value="category"> 
               {{category.categoryName}}</option>
           </select>

  <div class="main-search-input-item location" id="autocomplete-container"  *ngIf="selected">

      <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>
   </div>


   <button (click)="routeToSearch()" class="main-search-button">Search</button>
     </div>
  </div>

这是我的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();
      })
   }

   onSelect(category) {
  this.selected = category;
   console.log(category);
}

  }
}

抱歉，我在第一字段中选择了错误的代码，我需要选择类别名称，该其他字段服务名称应在响应中显示。...在第一响应中，当我选择该字段时，我拥有该类别名称的所有服务名称应该显示在另一个选项字段中

Answer 1

INSTEAD在类别选择选项use (change) = "onSelect(category)"中使用(click)="onSelect(category)" (change) = "onSelect(category)" 。 因此onSelect将要求更改类别。 使用以下。

       <select data-placeholder="All Categories" class="category" value="category.category.categoryName" (change)="onSelect($event.target.value)">
          <option  selected="selected" style="display:none">Select Category</option>
          <option class="select" 
          *ngFor="let category of categories;let i = index" value="{{category.categoryId}}" (click) = categoryIndex = i> 
           {{category.categoryName}}</option>
       </select>

在组件和onSelect方法中定义categoryIndex:any将是：

onSelect(value){
    selected.categoryServicemodel = this.yourResponseData.[categoryIndex];
}

https://stackblitz.com/edit/angular-swvxny?file=src/app/app.component.ts