今天写这个select多选，明明很简单的功能，but，因为功能稍微有点复杂，我又粗心大意，导致我的bug不断，整个功能写完后，感觉自己咋就那么蠢呢？啊！气死了，我要反思

我的是angular2项目，使用的NG-ZORRO组件库

普通的select多选

先了解官网的代码

官网示例

官网代码

import { Component, OnInit } from '@angular/core';@Component({selector: 'nz-demo-select-multiple',template: `<nz-select[nzMaxTagCount]="3"[nzMaxTagPlaceholder]="tagPlaceHolder"nzMode="multiple"nzPlaceHolder="Please select"[(ngModel)]="listOfSelectedValue"><nz-option *ngFor="let item of listOfOption" [nzLabel]="item" [nzValue]="item"></nz-option></nz-select><ng-template #tagPlaceHolder let-selectedList> and {{ selectedList.length }} more selected </ng-template>`,styles: [`nz-select {width: 100%;}`]
})
export class NzDemoSelectMultipleComponent implements OnInit {listOfOption: string[] = [];listOfSelectedValue = ['a10', 'c12'];ngOnInit(): void {const children: string[] = [];for (let i = 10; i < 36; i++) {children.push(`${i.toString(36)}${i}`);}this.listOfOption = children;}
}

对官网的代码做一点修改

1、添加方法，监测选项的变化

我在这里犯了错，我用错的方法，用错成了nzOpenChange，但他们俩的太近了，我没注意，粘贴错了，拿着nzOpenChange的方法，当成ngModelChange来使用，结果一直不符合预期，要把我气死

2、注意细节

平常我们用单选的情况较多，有时是在单选的条件下做修改，改为多选，这里容易犯错（好吧，这里就是我犯的错）
需要修改的地方
1、nzMode（这里应该不会犯错）

2、数组与字符串
单选时是字符串，多选时是数组

接下来是我的个人的犯错笔记

需求

因为添加和编辑共用同一个页面，因此还要做额外的操作（对话框的注意细节就不用讲了）
1、添加时，要设置每次打开时，都要重置页面数据。这里不仅要设置点击打开时listOfSelectedValue=[]，注意，确定和取消操作时，也要设置listOfSelectedValue=[]，就算要设置一个默认选中项，也只在第一次打开页面时赋值，确定和取消操作时，都要清空listOfSelectedValue=[]。（这是我犯错的地方。我三个地方都设置默认选中了）
2、编辑时，根据id获取当前数据，并把获得的数据渲染到页面上。首先有一点要确认，接口返回的名称这一项数据，返回的是字符串还是数组。因为我们需要的是数组，接口返回字符串的话，我们要进行转化。其次，在我的项目里，因为我的名称是根据类型而选择不同的集合，我要先判断返回的类型是哪个，找到对应的集合，在把要显示的数据传给集合，进行筛选，在渲染。还有一点要注意，问问后端接收的是字符串还是数组，这决定了传参前是否要进行转化。

思想都有了，代码就就简单了

<nz-select [(ngModel)]="listOfSelectedValueName"nzPlaceHolder="请选择"style="width: 100%;"name='name2'nzMode="multiple"(ngModelChange)='selectNameChange($event)'><nz-option *ngFor="let option of listOfOptionName" [nzValue]="option.value" [nzLabel]="option.label"></nz-option></nz-select>

selectNameChange(e) {
console.log(e)
// e.join(',')
}