이전 드롭 다운 선택 값을 기준으로 드롭 다운을 만듭니다.

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에게 배열을 만들고, 각 은행에서 부동산 branches과 그 은행에 속하는 각 도시와 배열을 포함 속성 cities을 가질 것이라고 해당 도시에 속한 모든 지점을 포함합니다.

그래서이 작업을 수행하는 구성 요소 코드는 다음과 같을 것이다 :

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

템플릿에서 우리는 전체 개체 바인딩 ngValue과 함께 ngModel을 사용하여 다음과 같이 보일 것이다

:

을

<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