以前のドロップダウン選択値に基づいてドロップダウンを作成します

Question

私はいくつかのサービスを経由しているjsonファイルを持っていて、それをドロップダウンに埋め込んでいます。最初のドロップダウンは正しく入力されているバンク名ですが、2番目と3番目のドロップダウンでは、都市とブランチの名前は機能しません。最初のバンクの都市名とブランチの名前だけが入力されます。 は、私は私がロジック

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ファイルを追加しました。私は個人的には一般的にカスタムパイプを使用しないようにしています。なぜなら、それが不純である必要がある場合はコストがかかる可能性があり、好きなようにデータを使用できるようにデータを変更するからです。成分。

したがって、この場合には、私は、最初のプロパティbranchesとそのバンクに属する各都市との配列を含むプロパティcitiesを、持っている、それは反復可能だように、あなたのデータを変更するので、banks配列を作成し、各バンクのでしょうその特定の都市に属するすべての支店が含まれています。

：あなたのテンプレートは、我々は全体のオブジェクトをバインドする ngValueと一緒 ngModelを使用し、以下、次のようになり

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

：

これを行うためのだからあなたのコンポーネントのコードは、次のようになります

<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