nz-select选项无法默认显示_nzplaceholder默认文字没有显现出来-优快云博客

本文链接：https://blog.youkuaiyun.com/u011390452/article/details/100690504

本文探讨了在Angular项目中使用nz-select组件实现多选功能的正确方法。通过对比不同的初始化选中项的代码实现，揭示了为何一次性赋值能更有效地展示预选中的选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目中使用nz-select选择框，前段代码如下。选中了几个选项，保存所选值

<nz-select nzMode="multiple" style="width: 100%" nzPlaceHolder="请选择文章标签" [(ngModel)]="tagIdList">
    <nz-option *ngFor="let option of selectTags" [nzLabel]="option.name" [nzValue]="option.id"></nz-option>
  </nz-select>

selectTags=[{id:1,name:"aa"},{id:2,name:"bb"},{id:3,name:"cc"},{id:4,name:"dd"}]
tagIdList=[1,2,3]

最初获取已选中的值代码如下，但是结果是选择框中什么都不显示，当手动选中一个选项后tagIdList的选中项都显示出来了

    let self = this;
    this.tagService.tagDetail().subscribe(res => {
        let tagsTemp = res.responseBody.tags;
        if( tagsTemp &&  tagsTemp.length > 0){
          let selectTagList = [];
          tagsTemp.forEach(function (tag) {

            self.tagIdList.push(tag.id);
          })
        }
      })

后来修改成下面代码，正常显示出结果。注意self.tagIdList的赋值方式，上面是依次push值，下面是一次性赋值。

    let self = this;
	this.tagService.tagDetail().subscribe(res => {
        let tagsTemp = res.responseBody.tags;
        if( tagsTemp &&  tagsTemp.length > 0){
          let selectTagList = [];
          tagsTemp.forEach(function (tag) {

            selectTagList.push(tag.id);
          })
          self.tagIdList = selectTagList;
        }
      })