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

Question

我有下拉菜单：

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

提前致谢！

Answer 1

只需添加将在 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 进行过滤。

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

How do I show extra option on checked checkbox?

angular-material

angular-ngselect

angular