根據之前的下拉選擇值創建下拉

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