Angular 基于上一个下拉列表选择的值创建下拉列表

我有一个json文件，我正在通过一些服务获取它，然后在我的下拉列表中填充它。第一个下拉列表是正确填充的银行名称，但第二个和第三个下拉列表中我要填充的城市和分行名称不起作用。它只填充第一家银行的城市名称和分行的城市名称。 我在使用该逻辑的地方添加了json文件和component.ts文件

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"

                        }
                    }
                }
            }
        }
    }
}

组件技术

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

---

您可以为此使用自定义管道。我个人通常会尽量避免使用定制管道，因为如果需要不纯的话，定制管道的成本可能会很高，而是修改数据，以便我们可以随意使用，换句话说，就是在组件中进行“工作”

因此，在本例中，我首先将您的数据修改为可编辑，因此将

银行

设置为一个数组，在每个银行中都有一个属性

城市

，其中包含一个数组，每个城市都属于该银行，属性

分行

，其中包含属于该特定城市的所有分行

因此，用于执行此操作的组件代码如下所示：

//收到数据后调用此方法
修改银行（）{
//banksArr包含您的JSON
this.banksar=this.transform（banks.banks，'bank'，'cities'）；
this.banksArr.forEach（bank=>{
bank.cities=this.transform（bank.cities，'city'，'branchs'）
bank.cities.forEach（城市=>{
city.branchs=this.transform（city.branchs，'branch'，'ifsc'）
})
})
}
转换（值、str1、str2）{
let keyArr:any[]=Object.keys（值），
dataArr=[]；
keyArr.forEach（（key:any）=>{
dataArr.push（{[str1]：key[str2]：value[key][str2]}）；
});
返回数据arr；
}

您的模板如下所示，其中我们使用

ngModel

和

ngValue

来绑定整个对象：

{{bank.bank}
{{city.city}
{{branch.branch}}

---

演示：

大家好。当我使用您建议的更改运行代码时，控制台中出现错误。错误类型错误：无法将IDFCMODALCOMMENT.webpackJsonp…/../../../../../../../../src/app/payment/modal/modal.component.ts.IDFCMODALCOMMENT.transform（modal.component.ts:60）中的Function.keys（）处的未定义或null转换为对象在IDFCModalComponent.webpackJsonp…/../../../../../../src/app/payment/modal/modal.component.ts.IDFCModalComponent.ngonit（modal.component.ts:45）当我在transform方法中安慰value字段时，它给了我undefinedit现在工作正常，但我无法从中访问ifsc。我必须从上一个forEach语句中捕获该ifsc。我正在尝试此代码city.branchs.forEach（branch=>{this.ifsccode=branch.ifsc；，但在这种情况下，如果我从下拉列表中选择第一个分支，我总是获得第二个分支eevn的ifsc