nz-select使用自定义下拉选项，实现下拉选项可展开/收起

标题就已经说明了实现思路

• 在选择框内部，有两个 <nz-option-group> 元素，分别表示 "Manager" 和 "Engineer" 两个分组，用来将选项分组展示。
• 每个 <nz-option-group> 元素内部包含了一个自定义的分组标题，用 <ng-template> 标签来定义。
• 在每个分组内部，根据 expandManager 和 expandEngineer 变量的值，决定是否展开选项。
• 当点击分组标题时，会调用 toggleOptions() 方法来切换对应分组的展开状态。

// component.html
<nz-select [(ngModel)]="selectedValue" nzAllowClear (input)="handleInput($event)" nzPlaceHolder="Choose" nzShowSearch
    nzDropdownClassName="nzDropdownClassName-aa" nzMode="multiple" style="width: 200px;">
    <---展开的行--->
    <nz-option-group [nzLabel]="managerLabel">
        <ng-container *ngIf="expandManager">
            <nz-option nzValue="jack" nzLabel="Jack"></nz-option>
            <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
            <nz-option nzValue="Lucy1" nzLabel="Lucy1"></nz-option>
        </ng-container>
        <--自定义分组标题-->
        <ng-template #managerLabel>
            <div class="d-flex flex-center" (click)="toggleOptions('manager')">
                <span nz-icon nzType="down" nzTheme="outline"></span>
                <span style="color: gray;">Manager</span>
            </div>
        </ng-template>
    </nz-option-group>
    <---收起的行--->
    <nz-option nzCustomContent nzDisabled [nzHide]="expandManager" data-class="expandManager">
        <div class="d-flex flex-center" style="width: 100%;cursor:default;font-size:12px;color: gray;"
            (click)="toggleOptions('manager')">
            <span nz-icon nzType="right" nzTheme="outline"></span>
            <span style="color: gray;">Manager</span>
        </div>
    </nz-option>

    <--不会影响正常的option-->
    <nz-option nzCustomContent nzDisabled data-class="expandManager">
        testnzDisabled
    </nz-option>

    <nz-option-group [nzLabel]="engineerLabel">
        <--自定义分组标题-->
        <ng-template #engineerLabel>
            <div class="d-flex flex-center" (click)="toggleOptions('engineer')">
                <span nz-icon nzType="down" nzTheme="outline"></span>
                <span style="color: gray;">Engineer</span>
            </div>
        </ng-template>
        <---展开的行--->
        <ng-container *ngIf="expandEngineer">
            <nz-option nzValue="tom" nzLabel="Tom"></nz-option>
            <nz-option nzValue="tom1" nzLabel="Tom1"></nz-option>
        </ng-container>
    </nz-option-group>
    <---收起的行--->
    <nz-option nzCustomContent nzDisabled [nzHide]="expandEngineer">
        <div class="d-flex flex-center" style="width: 100%;cursor:default;font-size:12px;color: gray;"
            (click)="toggleOptions('engineer')">
            <span nz-icon nzType="right" nzTheme="outline"></span>
            <span style="color: gray;">Engineer</span>
        </div>
    </nz-option>
</nz-select>

// component.ts
@Component({
  selector: 'nz-demo-tree-view-directory',
  templateUrl: './dome.component.html',
  styleUrls: ['./dome.component.less']
})
export class DomeComponent {
    // 下拉默认值
    selectedValue = ['lucy'];
    // 默认展开
    expandEngineer = true
    expandManager = true
    // 当下拉输入时事件
    handleInput(v: any) {
        console.log(v)
        if (!v.data.trim()) { return }
        this.expandEngineer = true
        this.expandManager = true
    }
    // 点击有展开图标的项，进行切换
    toggleOptions(optionType: string) {
        if (optionType === 'manager') {
          this.expandManager = !this.expandManager;
        } else if (optionType === 'engineer') {
          this.expandEngineer = !this.expandEngineer;
        }
    }
}

nz-modalz出现滚动条时，下拉选项框会随滑动而错位。怎么解决？