Фильтрация данных по цепочке Ng-Select (s)

Question

У меня есть список штатов (штат США) и округов, которые мне нужно отфильтровать и отобразить значения. Для простоты я подумал, что цепочка ng-select будет самым простым интерфейсом. Однако у меня возникают проблемы с загрузкой соответствующих округов выбранного штата во втором ng-select. Куда я иду с трека? Заранее спасибо ..

шаблон:

    <div class="col">
        <p>State {{selectedState}}</p>
        <ng-select 
           [items]="states" 
           bindLabel="state" 
           bindValue="state" 
           [(ngModel)]="selectedState">
        </ng-select>
    </div>
    <div class="col" *ngIf="selectedState">
        <p>County {{selectedCounty}}</p>
        <ng-select 
           [items]="selectedState.counties" 
           bindLabel="selectedState.counties.name" 
           bindValue="selectedStatecounties.name"
           [(ngModel)]="selectedCounty">
        </ng-select>
    </div>

Списки:

states = [
        {
            state: "Alabama",
            counties:  [{
                name: "Alabama1"
              },
              {
                name: "Alabama2"
                          }]
          },
        {
          state: "Alaska",

          counties:  [{
                name: "Alaska1"
              },
              {
                name: "Alaska2"
                          }]
        },

Answer 1

Stackblitz: https://stackblitz.com/edit/ng-select-ymus3e

Попробуйте следующее:

app.component.ts:

import {Component, NgModule, ViewChild} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {FormControl, FormGroup, ReactiveFormsModule, FormsModule} from '@angular/forms';
import {NgSelectModule, NgOption} from '@ng-select/ng-select';

@Component({
    selector: 'my-app',
    template: `
          <div class="col">
        <p>State {{selectedState}}</p>
        <ng-select 
           [items]="states" 
           bindLabel="state" 
           bindValue="state"
           (change)="stateChanged($event)"
           [(ngModel)]="selectedState">
        </ng-select>
    </div>
    <div class="col" *ngIf="selectedState">
        <p>County {{selectedCounty}}</p>
        <ng-select 
           [items]="availableCounties" 
           bindLabel="name" 
           bindValue="name"
           [(ngModel)]="selectedCounty">
        </ng-select>
    </div>
`
})
export class AppComponent {

    states = [
        {
            state: "Alabama",
            counties:  [{
                name: "Alabama1"
              },
              {
                name: "Alabama2"
                          }]
          },
        {
          state: "Alaska",

          counties:  [{
                name: "Alaska1"
              },
              {
                name: "Alaska2"
                          }]
        }
    ]

    selectedState: any;
    availableCounties: any;
    selectedCounty: any;

    constructor() {

    }

    stateChanged(event) {      
      this.selectedCounty = undefined;
      this.availableCounties = event.counties;
    }
}

Answer 2

Вот модифицированная версия вашего кода, которая работает.

<div class="col">
        <p>State {{selectedState.state}}</p>
        <ng-select  
           [items]="states" 
           bindLabel="state" 
           [(ngModel)]="selectedState">
        </ng-select>
    </div>
    <div class="col" *ngIf="selectedState">
        <p>County {{selectedCounty}}</p>
        <ng-select 
           [items]="selectedState.counties" 
           bindLabel="name" 
           bindValue="name"
           [(ngModel)]="selectedCounty">
        </ng-select>
    </div>