Question

我正在多个下拉菜单中工作。我已经从php创建了一个数组，它看起来像这样：

https://api.myjson.com/bins/1emzic

现在从这个json我想显示4下拉菜单。

在第一个下拉列表中，我需要显示

"FS A", "FS MT" and "FS OTHER"

基于第一个选择，我需要在第二，第三和第四部分显示其相关数据，依此类推，依次添加数据。

这是我需要绑定的东西

<select [(ngModel)]="first" id="first">
   <option value="" disabled selected>select a category</option>
   <option *ngFor="let item of first_list" [value]="item.category">{{item.category}}</option>
 </select>
<br>
 <select [(ngModel)]="second" id="second">
   <option value="" disabled selected>select a category</option>
   <option *ngFor="let item of first_list" [value]="item.category">{{item.category}}</option>
 </select>
<br>

 <select [(ngModel)]="third" id="third">
   <option value="" disabled selected>select a category</option>
   <option *ngFor="let item of first_list" [value]="item.category">{{item.category}}</option>
 </select>

<br>

 <select [(ngModel)]="four" id="four">
   <option value="" disabled selected>select a category</option>
   <option *ngFor="let item of first_list" [value]="item.category">{{item.category}}</option>
 </select>

这是我的json数据

{"FS A":{"BKK":{"BKK PULL":{"BKK SR1":[]},"BKK PUSH":{"BKK BCDE1":[],"BKK BAKE SE1":[]}},"RSM2":{"CHIANGMAI":{"CMI WS SE1":[],"CMI WS SE2":[]},"NORTH":{"NO1 SE1":[],"NO2 SEPLUS1":[],"NO3 SE1":[]},"ASM HOTEL BKK":{"BKK HO 5STARS1":[],"BKK HO SR1":[],"BKK HO SR2":[],"BKK HO SR3":[]}}},"FS MT":{"FSR1":{"FSA1":{"FS MAKRO":[]}},"FSR2":{"FSA2":{"FS FOODLAND":[],"FS GAS STATION":[],"FS VILLA MARKET JP":[],"SIAM FOODSERVICE":[]}},"FS LOCAL EXP":{"FS LOCAL EXP BKK":{"FS LOCAL EXP BKK":[]},"FS LOCAL EXP CD":{"FS LOCAL EXP CD":[]},"FS LOCAL EXP MM":{"FS LOCAL EXP MM":[]}}},"FS OTHER":{"FS OTHER":{"FS OTHER":{"FS OTHER":[]}}}}

有人可以帮我吗？

我在这里工作：

https://stackblitz.com/edit/angular-dsylxi

Answer 1

您需要定义彼此之间的依赖关系，并以此为基础来填充模型及其选项。我将寻求通用解决方案，该解决方案可以使用一个功能并适用于所有下拉菜单。

这是您需要的模型变量

 wholeList:any = [];
  first:any = [];
  second:any = [];
  third:any = [];
  four:any = [];
  firstModel = ''
  secondModel = ''
  thirdModel = ''
  fourModel = ''

然后您首先填写第一个下拉列表

this.testService.get_data().subscribe(
      res => { 
        this.wholeList = res;
        this.first = Object.keys(this.wholeList).map(a=> a);
        console.log("res", this.first);
      },
      err => {
        console.log(err);
      }
    )

然后在视图中需要触发一个看起来像这样的依赖项，请注意，我正在定义依赖项ChangeDropdown(this.wholeList[firstModel],'second')"

<select [(ngModel)]="firstModel" id="first"  (ngModelChange)="ChangeDropdown(this.wholeList[firstModel],'second')">
   <option value="" disabled selected>select a category</option>
   <option *ngFor="let item of first" [value]="item">{{item}}</option>
 </select>
<br>
 <select [(ngModel)]="secondModel" id="second" (ngModelChange)="ChangeDropdown(this.wholeList[firstModel][secondModel],'third')">
   <option value="" disabled selected>select a category</option>
   <option *ngFor="let item of second" [value]="item">{{item}}</option>
 </select>
<br>

 <select [(ngModel)]="thirdModel" id="third" (ngModelChange)="ChangeDropdown(this.wholeList[firstModel][secondModel][thirdModel],'four')">
   <option value="" disabled selected>select a category</option>
   <option *ngFor="let item of third" [value]="item">{{item}}</option>
 </select>

<br>

 <select [(ngModel)]="fourModel" id="four">
   <option value="" disabled selected>select a category</option>
   <option *ngFor="let item of four" [value]="item">{{item}}</option>
 </select>

最后是一个可以更新模型的常用功能

  ChangeDropdown = (value,dropdownName) =>{

    this[dropdownName] = Object.keys(value).map(a=>{
      return a;
    })
  }

Demo

如何在多维下拉菜单中显示多维数组？

1 个答案: