angular - 在 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 页面中显示下拉值，但不确定如何在匹配版本值更改时获取风味值。

标签： angulartypescriptdropdown

Answer 1

演示您可以使用 (change) 事件来检测更改。

例如，您在下面有两个选择

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

对于第一个选择，您可以放置​​更改事件，然后在组件中您可以更新第二个选择的数组

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;
  }