时间戳

首页 > 解决方案 > 如何在多个下拉菜单中显示多维数组？

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

问题描述

我正在使用多个下拉菜单。我从 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

标签： angular5

解决方案

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

这是您需要的模型变量

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

演示

推荐阅读