根据之前的下拉选择值创建下拉

Question

我有一个json文件，我正在通过一些服务获取，然后在下拉列表中填充它。第一个下拉列表是正确填充的银行名称，但对于第二个和第三个下拉列表，我想填充城市和分行名称不起作用。它仅填充第一家银行的城市名称和分行的相同名称。 我已经加入其中，我用的是逻辑

bankdetails.json

{ 
    "banks": { 
     "SBI": { 
      "cities": { 
       "Bangalore": { 
        "branches": { 
         "rrnamgar1": { 
          "ifsc" : "SBIN100000" 

         }, 
         "rrnamgar2": { 
          "ifsc" : "SBIN100001" 

         } 

        } 
       },"Hyderabad": { 
        "branches": { 
         "rrnamgar1": { 
          "ifsc" : "SBIN100000" 

         }, 
         "rrnamgar2": { 
          "ifsc" : "SBIN100001" 

         } 
        } 
       } 
      } 
     }, 
     "CBI": { 
      "cities": { 
       "pune": { 
        "branches": { 
         "rrnamgar1": { 
          "ifsc" : "SBIN100000" 

         }, 
         "rrnamgar2": { 
          "ifsc" : "SBIN100001" 

         } 
        } 
       },"chennai": { 
        "branches": { 
         "rrnamgar1": { 
          "ifsc" : "SBIN100000" 

         }, 
         "rrnamgar2": { 
          "ifsc" : "SBIN100001" 

         } 
        } 
       } 
      } 
     }, 
     "HDFC": { 
      "cities": { 
       "Bangalore": { 
        "branches": { 
         "rrnamgar1": { 
          "ifsc" : "SBIN100000" 

         }, 
         "rrnamgar2": { 
          "ifsc" : "SBIN100001" 

         } 
        } 
       },"Hyderabad": { 
        "branches": { 
         "rrnamgar1": { 
          "ifsc" : "SBIN100000" 

         }, 
         "rrnamgar2": { 
          "ifsc" : "SBIN100001" 

         } 
        } 
       } 
      } 
     }, 
     "BOI": { 
      "cities": { 
       "Bangalore": { 
        "branches": { 
         "rrnamgar1": { 
          "ifsc" : "SBIN100000" 

         }, 
         "rrnamgar2": { 
          "ifsc" : "SBIN100001" 

         } 
        } 
       },"Hyderabad": { 
        "branches": { 
         "rrnamgar1": { 
          "ifsc" : "SBIN100000" 

         }, 
         "rrnamgar2": { 
          "ifsc" : "SBIN100001" 

         } 
        } 
       } 
      } 
     }, 
     "IDFC": { 
      "cities": { 
       "Bangalore": { 
        "branches": { 
         "rrnamgar1": { 
          "ifsc" : "SBIN100000" 

         }, 
         "rrnamgar2": { 
          "ifsc" : "SBIN100001" 

         } 
        } 
       },"Hyderabad": { 
        "branches": { 
         "rrnamgar1": { 
          "ifsc" : "SBIN100000" 

         }, 
         "rrnamgar2": { 
          "ifsc" : "SBIN100001" 

         } 
        } 
       } 
      } 
     } 
    } 
} 

component.ts

ngOnInit(){ 

    this.banks = this.modalservice.returnBankList(); 
    this.cities = this.banks[Object.keys(this.banks)[0]]; 
    this.citiesname = this.cities[Object.keys(this.cities)[0]]; 
    this.branches = this.citiesname[Object.keys(this.citiesname)[0]]; 
    this.branchnames = this.branches[Object.keys(this.branches)[0]]; 

} 

firstDropDownChanged(val: any) { 
    let obj = Object.keys(this.banks); 
    console.log(obj, val); 



    if (obj != null && val !== -1) { 
     this.city = Object.keys(this.cities["cities"]); 

     console.log("cities are " + this.city); 
    } 

} 
secondDropDownChanged(val: any) { 
    let obj = this.city; 
    console.log(val, obj); 

    if (!obj) return; 

    if (obj != null && val !== -1) { 
     this.branch = Object.keys(this.branches["branches"]); 
    } 

Answer 1

您可以使用自定义管道将此我的JSON文件和文件component.ts 。我个人尽量避免使用自定义管道，因为如果它需要不纯的话，它们可能是昂贵的，而且修改数据以便我们可以随心所欲地使用它，换句话说，请执行“工作”零件。

因此，在这种情况下，我会先修改您的数据，这样，它的迭代，因此，请banks一个数组，并在每家银行有一个属性cities，其中包含与属于该银行的财产branches每个城市的数组包含属于该特定城市的所有分支。

所以这样做的组件代码，应该是这样的：

// call this method after receiving your data 
modifyBanks() { 
    // banksArr contains your JSON 
    this.banksArr = this.transform(banks.banks, 'bank', 'cities'); 
    this.banksArr.forEach(bank => { 
    bank.cities = this.transform(bank.cities, 'city', 'branches') 
    bank.cities.forEach(city => { 
     city.branches = this.transform(city.branches, 'branch', 'ifsc') 
    }) 
    }) 
} 


transform(value, str1, str2) { 
    let keyArr: any[] = Object.keys(value), 
    dataArr = []; 
    keyArr.forEach((key: any) => { 
     dataArr.push({[str1]: key, [str2]: value[key][str2]}); 
    }); 
    return dataArr; 
} 

您的范本看起来像下面，我们一起用ngModel与ngValue整个对象绑定：

<select [(ngModel)]="bank"> 
    <option [ngValue]="bank" *ngFor="let bank of banksArr"> 
    {{bank.bank}} 
    </option> 
</select> 
<select [(ngModel)]="city"> 
    <option [ngValue]="city" *ngFor="let city of bank?.cities"> 
    {{city.city}} 
    </option> 
</select> 
<select [(ngModel)]="branch"> 
    <option [ngValue]="branch" *ngFor="let branch of city?.branches"> 
    {{branch.branch}} 
    </option>  
</select> 

DEMO：StackBlitz