Угловой 6: раскрывающийся список опций на основе другого значения

Question

У меня есть 2 выпадающих списка, один для выбора штат , а другой для сервисное агентство . Параметры, отображаемые для сервисного агентства , зависят от состояния выбранного значения.

Данные для обслуживающего агентства и state раскрываются из profile.service.ts.

Проблема: Как изменить значение, отображаемое в сервисном агентстве, когда пользователь выбирает состояние.

profile.component.html

<mat-form-field>
    <mat-select placeholder="Service Agency" required formControlName="serviceAgency">
        <mat-option value="option">Option</mat-option>
        <mat-option value="{{item.id}}" *ngFor="let item of service_agency$">                     
            {{item.name}}  
        </mat-option>  
    </mat-select>
</mat-form-field>

profile.component.ts

//get state
get_state(){
    this.profileService.get_state().subscribe(data => {  
        this.state$ = data; 
    });  
}

//get service center base on state id
onChange(state) {
   this.service_agency$ = this.profileService.get_service_agency()
       .pipe(filter((item)=> item == state.value));

    console.log(this.service_agency$);
}

profile.service.ts

get_state() {
    return this.http.get(url)
        .pipe(map(data => {
            return data;
        }));
}

get_service_agency() {
    return this.http.get(url)
        .pipe(map(data => {
            return data;
        }));
}

Answer 1

В угловых, когда вы обновляете какие-либо данные, они также отражают эти данные в html.

Полагаю, когда вы меняете значение состояния, вы вызываете API и получаете новый список service agency.

Когда вы получаете новый список, вам просто нужно связать этот новый список с переменной. Angular автоматически свяжет этот новый список с HTML.

<option *ngFor="let item of service_agency$" value=[item.name]>
    {{item.name}}        
</option>

При изменении значения состояния:

onChange(state) {  // Get the ref of selected state 

  // Now hear you need to call API and pass state id and get new list of agency
  this.profileService.get_service_agency().subscribe((data) => {            

         // Clear all data from array and then bind new fresh data 
        this.service_agency$ = [];             // Clear 
        this.service_agency$.push(...data);    // Bind fresh data

        // Check data is bind in array properly or not ... 
        console.log("New service list data is ::: " , this.service_agency$);

  })
}

После привязки свежих данных новый список автоматически отобразится на странице HTML.