Javascript 通过链接Ng Select筛选数据

我有一个需要筛选和显示值的州（美国州）和县的列表。为了简单起见，我认为链接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>

闪电战：

请尝试以下方法：

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

从'@angular/core'导入{Component，NgModule，ViewChild}；
从“@angular/platform browser”导入{BrowserModule}；
从'@angular/forms'导入{FormControl，FormGroup，ReactiveFormsModule，FormsModule}；
从'@ng select/ng select'导入{NgSelectModule，NgOption}；
@组成部分({
选择器：“我的应用程序”，
模板：`
状态{{selectedState}}

县{{选定县}

`
})
导出类AppComponent{
国家=[
{
州：“阿拉巴马州”，
县：[{
名称：“阿拉巴马1”
},
{
名称：“阿拉巴马2”
}]
},
{
州：“阿拉斯加”，
县：[{
名称：“阿拉斯加1号”
},
{
名称：“阿拉斯加2号”
}]
}
]
selectedState：任意；
可用单位：任何；
所选县：任何；
构造函数（）{
}
状态更改（事件）{
this.selectedCounty=未定义；
this.availableCounties=event.countries；
}
}

这是您的代码的修改版本，可以正常工作

状态{{selectedState.State}

县{{选定县}

你就是布鲁诺！谢谢，正是我需要的。也谢谢你的工作示例。我最初确实尝试过这一点，然后在你发布这篇文章后再次访问，我认为我错过了一些东西，但仍然无法让它正常工作。谢谢你的回答

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