通过链接 Ng-Select(s) 过滤数据

Question

我有一个需要过滤和显示值的州（美国州）和县的列表。 为简单起见，我认为链接 ng-selects 将是最简单的 UI。 但是，我无法在第二个 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>