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

Question

我有一个州（U.S.州）和县的列表，我需要过滤和显示这些值。为了简单起见，我认为链接 ng-selects 是最简单的 UI。但是，我无法在第二个 ng-select 中加载 selected 州的各个县。我在哪里偏离轨道？提前致谢..

模板：

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

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

Filter Data By Chaining Ng-Select(s)

javascript

json

angular-ngselect

angular

angular8