【NG-ZERRO】select 可增加选项，nzDropdownRender对选项扩展

功能描述：

在下拉框中待选项可能并没有用户需要，这个时候希望实现用户能够自定义选项。

查看官方文档发现一个扩展菜单功能，代码如图所示：

  <nz-select style="width: 120px;" nzShowSearch nzAllowClear [ngModel]="'lucy'" [nzDropdownRender]="render">
      <nz-option nzValue="jack" nzLabel="Jack"></nz-option>
      <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
  </nz-select>
  <ng-template #render>
      <nz-divider style="margin: 4px 0;"></nz-divider>
      <div style="padding: 8px; cursor: pointer"><i nz-icon type="plus"></i> Add item</div>
  </ng-template>

结果拿下来用发现没有没有效果？细看代码发现，原来官方只是给提供了一个模版，并不包含交互，那就只好自己写了。

1.获取用户输入的值，官方提供一个nzOnSearch方法可以记录文本框的值，另外在添加选项出要自己加上点击事件。

<nz-select
   (ngModelChange)="onChange($event)"
   [(ngModel)]="selectedValue
   (nzOnSearch)="setItem($event)"
   style="width: 160px;"
   nzShowSearch
   [nzDropdownRender]="render">
     <nz-option *ngFor="let l of List;" nzLabel="{{l.name}}" nzValue="{{l.value}}"></nz-option>
</nz-select>
<ng-template #render>
     <nz-divider style="margin: 4px 0;"></nz-divider>
     <div style="padding: 8px; cursor: pointer" (click)="addItem($event)">Add item</div>
</ng-template>

2.然后实时记录用户输入的值，在用户搜索结束发现没有需要的选项时，点击添加，判断用户输入的值，是否符合要求，做个简单的校验就可以把输入值加入到list中了，这里只做了非空判断。

 setItem(value: string) {
    this.newName = value;
  }

  addItem() {
    if (this.newName) {
      if (this.list.find(v => v.id === 0)) {
        this.list.pop();
       }
      this.list.push({ id: 0, name: this.newName });
    }
  }

3.以上就是主要实现部分了，因为用户新增的不一定是正确的，所以新增项目并不会直接增加到数据库中，只是在下一次获取的时候，需要判断一下该项值是否在list中，如果不在，就在list中增加一项再展示（让用户以为自己添加进去了，嘻嘻）。

注：

1.这里控制的是用户只能增加一项，新增加的一项会覆盖前一项，这里选择将在list中pop出旧一项，然后将新的项push进去，如果直接修改原有的项目值，那么在搜索结果为空时，点击新增，新增的项目并不会出现在搜索结果中。

 

主要用博客总结在项目中遇到的一些问题，希望各位大佬不吝指正。