Question

我有一个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"

                        }
                    }
                }
            }
        }
    }
}

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

您可以使用自定义管道。我个人试着避免一般的自定义管道，因为如果它们需要不纯，它们可能成本很高，而是修改数据，以便我们可以随意使用它，所以换句话说，做“工作”成分

所以在这种情况下，我会首先将您的数据修改为可迭代，因此将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

根据先前的下拉选择值创建下拉列表

1 个答案: