在Angular中使用NG-ZORRO的选择框不能自定义输入选项

项目场景：

已有下拉选择框，根据后端接口返回的数据遍历生成option，但数据库中不能覆盖所有用户需要的选项，所以需要实现既能选择，又能手动输入的功能

---

问题描述

首先我在官方文档发现一个可添加选项的样例，如图，用户可以在下方手动添加需要的选项，然后选择。但是由于我们的数据是后端返回的静态数据，在数据回显时会出现问题。

---

原因分析：

数据回显时，由于选择框的数据是静态的，在选项数组中找不到用户添加的选项，所以自定义选项无法正常回显出来。

---

解决方案：

在选择框前方添加一个button，点击后用户可切换输入方式，如果用户需要的数据在选项中存在可直接选择，若不存在，可切换为输入框，手动输入。

HTML

<div style="display: flex">
            <button nz-button [disabled]="isDisabled" (click)="toggleEdit()">
              {{ isEditing ? '切换选择' : '切换自定义' }}
            </button>
            <div *ngIf="isEditing">
              <input class="selectinput" nz-input placeholder="请输入区/县名" [(ngModel)]="formData.vCountyName"
                [disabled]="isDisabled" />
            </div>
            <div *ngIf="!isEditing">
              <nz-select nzShowSearch nzPlaceHolder="请选择区/县名" [(ngModel)]="formData.vCountyName"
                (ngModelChange)="onCountyChange($event)" [nzDisabled]="isDisabled">
                <nz-option *ngFor="let county of countyOfOption" [nzLabel]="county.areaName"
                  [nzValue]="county.areaName">
                </nz-option>
              </nz-select>
            </div>
          </div>

TS

@Input() countyOfOption: CountyInfo[] = [];
public isEditing = false; // 控制选择框和输入框的显示状态  
public _propData: any = {};

 ngOnInit(): void {
    this.isEditing = false;
    const IS_EMPTY_OBJ = (obj: any) => obj && typeof obj === 'object' && Object.keys(obj).length > 0;
    // 检查 this._propData 是否是一个非空对象
// 初始化时在选项数组中查找是否存在该选项，如果不存在，则标志为true显示输入框
    if (this.countyOfOption.length > 0 && IS_EMPTY_OBJ(this._propData)) {
      const RES = this.countyOfOption.find(item => item.areaName === this._propData.vCountyName);
      if (!RES) {
        this.isEditing = true;
      }
    }
  }

toggleEdit(): void {
    this.isEditing = !this.isEditing; // 切换编辑状态
  }

实现效果：