angular - 具有角度的剑道网格与剑道多选

Question

我当前的 Angular 项目使用带有一些剑道网格的最新 Angular 版本。我们有一个要求，我需要有一个剑道网格并为两个列 - 州，县使用剑道多选。因此，在网格中添加/编辑数据时，用户应该能够选择多个州，并且县列应该根据所选州过滤数据。我不确定如何实现这一目标。请帮忙！

我添加了一些基本代码，如下所示。状态栏工作正常，让我选择多个状态。我无法根据选定的州正确过滤县列数据。

我的html代码：

    <kendo-grid style="height:600px" [kendoGridBinding]="statesData">   
        <kendo-grid-column field="capital" title="Capital City" width="140"></kendo-grid-column>    

        <kendo-grid-column field="stateName" title="State" width="140" id="stateColumn">
            <ng-template kendoGridCellTemplate >
                <kendo-multiselect [data]="statesData" textField="stateName" valueField="stateId"                                                         
                                   (valueChange)="onStateChange($event)">
                </kendo-multiselect>
            </ng-template>
        </kendo-grid-column>

        <kendo-grid-column field="countyName" title="County" width="140" id="countyColumn">
            <ng-template kendoGridCellTemplate >
                <kendo-multiselect [data]="countiesData" textField="countyName" valueField="countyId">             
                </kendo-multiselect>
            </ng-template>
        </kendo-grid-column>        

    </kendo-grid>

TS代码：

    public statesData: IState[] = states;
    public countiesData: ICounty[] = counties;

    public onStateChange(values) {
      const selStateIds = values.map(s => s.stateId);   
      const selectedCounties = this.countiesData.filter( c => selStateIds.includes( c.stateId ) );
      this.countiesData = selectedCounties;
    }

我的状态数据：

export const states: IState[] =
 [
    {
        stateId: 1,
        stateName: "Delaware",
        capital: "DelCaptital"
    },
    {
        stateId: 2,
        stateName: "New York",
        capital: "NY Captital"
    },
    {
        stateId: 3,
        stateName: "New Jersey",
        capital: "NJ Captital"
    },  
    {
        stateId: 4,
        stateName: "Virginia",
        capital: "VA Captital"
    },       

];

县数据：

export const counties: ICounty[] = [
    {
        countyId: 1,
        stateId: 1,
        countyName: "Delaware County 1"      
    },
    {
        countyId: 2,
        stateId: 1,
        countyName: "Delaware County 2"   
    },
    {
        countyId: 3,
        stateId: 1,
        countyName: "Delaware County 3"   
    },  
    {
        countyId: 4,
        stateId: 4,
        countyName: "VA County 1"  
    }, 
    {
        countyId: 5,
        stateId: 4,
        countyName: "VA County 2"  
    },
    {
        countyId: 6,
        stateId: 4,
        countyName: "VA County 3"  
    },
];

标签： angulartypescriptkendo-uikendo-gridkendo-multiselect