在 Angular 8 中更改另一个下拉列表时更新下拉值

Question

我有两个下拉菜单，在更改第一个下拉菜单值时，我想从该值中获取匹配的 json 对象并更新第二个下拉菜单的值

JSON

 this.dropdownValues = {
"mysql 8": {
    "flavor": [
        "medium",
        "small",
        "large"
    ],
    "version": "mysql 8"
},
"mysql 5.7": {
    "flavor": [
        "small",
        "medium"
        
    ],
    "version": "mysql 5.7"
}
}

由此 JSON 我在第一个下拉列表中显示版本值，并且在第一个下拉列表值发生变化时，我想用相关的风味数组更新第二个下拉列表值。假设如果我选择版本“mysql 5.7”，那么第二个下拉菜单应该显示中小风味值。

如何在 angular 中实现此目的 8. 我能够在我的 html 页面中显示下拉值，但不确定如何在匹配版本值发生变化时获得风味值。

Answer 1

Demo 您可以使用（更改）事件来检测更改。

例如你下面有两个select

<select [(ngModel)]="sqlVersion"(change)="onChange()" >
  <option value="-1">Choose Version</option>
  <option *ngFor="let el of versions" value="{{el}}" >{{el}}</option>
</select>
<select [(ngModel)]="choosenFlavor">
  <option value="-1">Choose Flavor</option> 
    <option *ngFor="let ver of flavors" value="{{ver}}" >{{ver}}</option>
</select>

对于第一个 select 您可以放置更改事件，然后在组件中您可以更新第二个 select

的数组

sqlVersion="-1";
  flavors=[];
  choosenFlavor="-1";
  versions=[];
  dropdownValues = {
    "mysql 8": {
        "flavor": [
            "medium",
            "small",
            "large"
        ],
        "version": "mysql 8"
    },
    "mysql 5.7": {
        "flavor": [
            "small",
            "medium"
            
        ],
        "version": "mysql 5.7"
    }
  }
  constructor(){
    this.versions=Object.keys(this.dropdownValues)
  }
  onChange(){
    this.choosenFlavor = '-1';
    if(this.sqlVersion=="-1"){
      this.flavors=[];
      return;
    }
    this.flavors=this.dropdownValues[this.sqlVersion].flavor;
  }

在 Angular 8 中更改另一个下拉列表时更新下拉值

Update the dropdown value on change of another dropdown in Angular 8

typescript

dropdown

angular