캐스케이딩 콤보가 있는 Angular 그리드

    그리드의 편집 기능은 계단식 콤보를 사용할 수 있는 기회를 제공합니다. 이전 콤보에서 값을 선택하면 사용자는 다음 콤보 내에서 선택한 항목과 관련된 데이터만 받게 됩니다.

    Angular Grid with Cascading Combos Sample Overview

    아래 샘플은 중첩된Grid 상태에서 어떻게Cascading Combos 작동하는지 보여줍니다.

    Setup

    칼럼 편집을 활성화하려면 반드시 확인하세요editable 속성이 참.

    열 편집이 활성화되면 Single Select ComboBox를 추가하여 시작할 수 있습니다. 여기서 하나의 선택 항목만 사용할 수 있도록 하려면 igxCombo를 수정하는 대신 igxSimpleCombo를 사용해야 합니다.

    시작하려면 심플 콤보박스 컴포넌트, 먼저 다음 데이터를 가져와야 합니다.IgxSimpleComboModule 당신의 app.module.ts 파일:

    import { IgxSimpleComboModule } from 'igniteui-angular/simple-combo';

@NgModule({
    imports: [
        ...
        IgxSimpleComboModule,
        ...
    ]
})
export class AppModule {}

    그런 다음 템플릿에서 igx-simple-combo 콤보를 일부 데이터에 바인딩해야 합니다.

    • displayKey-객체 배열에 필수- 항목 텍스트에 사용할 속성을 지정합니다. displayKey에 대한 값이 지정되지 않으면, 단순 콤보박스는 지정된valueKey 값을 사용합니다(있다면).
    export class MySimpleComboComponent implements OnInit {
    public countriesData: Country[];
    public selectedCountry: Country;
    public selectedCity: City;

    public ngOnInit() {
        this.countriesData = getCountries([
            'United States',
            'Japan',
            'United Kingdom'
        ]);
    }
}

    선택 변경을 처리하려면 SelectionChanging() 이 필요합니다. 내보낸 이벤트 인수 IComboSelectionChangingEventArgs 에는 변경 전 선택 항목, 현재 선택 항목, 추가되거나 제거된 항목에 대한 정보가 포함되어 있습니다. 따라서 이전 콤보의 선택을 기준으로 값을 필터링합니다.

    <igx-combo [data]="countriesData" (selectionChanging)="countryChanging($event)"></igx-combo>

    public countryChanging(event: IComboSelectionChangeEventArgs) {
    if (event.added.length) {
        event.newSelection = event.added;
    }
}

    마지막으로, 데이터 목록을 로드할 때 필요한 선형 진행를 추가합니다. 속성id 값을id 설정하는 데 필요합니다.

     <igx-linear-bar 
    [id]="'region-progress-' + cell.row.data.ID" 
    [style.visibility]="'hidden'"
    type="info" [indeterminate]="true">
</igx-linear-bar>

    API Summary

    Additional Resources