如何在选中的复选框上显示额外选项？

如何解决如何在选中的复选框上显示额外选项？

<ng-select [items]="items" bindLabel="name" ngModel name="dropdown" formControlName="dropdown" required></ng-select>

这里是项目：

 items = [
    {
      id: 1,name: 'Option 1'
    },{
      id: 2,name: 'Option 2'
    },{
      id: 3,name: 'Option 3'
    },{ //extra option
      id: 4,name: 'Option 4'
    },]

我希望隐藏额外的项目（选项 4）。当用户单击复选框时，会显示额外的选项。我该怎么做？

我的复选框：

<mat-checkBox class="example-margin" ngModel name="checkBox" formControlName="checkBox">Show hidden option!</mat-checkBox>

提前致谢！

解决方法

只需添加将在 ng-select 中使用的额外数组 itemsToShow。原始数组将仅用作数据源。然后在复选框更改分配给 itemsToShow 原始数组或过滤一个 id 字段（取决于当前复选框值）。

组件：

export class DemoComponent implements OnInit {
    checkbox = new FormControl(false);

    items = [
        { id: 1,name: 'Option 1' },{ id: 2,name: 'Option 2' },{ id: 3,name: 'Option 3' },{ id: 4,name: 'Option 4'},];

    itemsToShow = [];
    itemIdToHide = 4;

    ngOnInit(): void {
        this.itemsToShow = this.getFilteredItems([this.itemIdToHide]);

        this.checkbox.valueChanges.subscribe((checked) => {
            if (checked) {
                this.itemsToShow = [...this.items];
            } else {
                this.itemsToShow = this.getFilteredItems([this.itemIdToHide]);
            }
        });
    }

    private getFilteredItems(idsToHide: number[]): { id: number; name: string }[] {
        return this.items.filter((item) => !idsToHide.includes(item.id));
    }
}

模板：

<ng-select [items]="itemsToShow" bindLabel="name" ngModel name="dropdown" formControlName="dropdown" required></ng-select>
<mat-checkbox class="example-margin" [formControl]="checkbox">Show hidden option!</mat-checkbox>

注意，getFilteredItems() 方法可以通过多个 id 过滤。