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

时间:2018-09-22 05:32:03

标签: angular

  

我有这样的回复

ValueError: could not broadcast input array from shape (80,84,80) into shape (80,84,80,1)
  

然后我有一个选择字段

[
{
"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>
  

对不起,错误代码篡改   在第一个字段中,我需要选择类别名称,该名称基于其他字段服务名称应作为响应显示。   在第一个响应中,当我选择该字段时,我具有类别名称。该类别下的所有服务名称应显示在另一个选项字段

1 个答案:

答案 0 :(得分:3)

要在类别选择选项使用(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>

在component和onSelect方法中定义categoryIndex:any将是:

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

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