angular6+ ng-zorro实现下拉列表的多选功能

angular6+ ng-zorro实现下拉列表的多选功能_第1张图片

<nz-select style="width: 100%" nzMode="multiple" nzPlaceHolder="Please select" [(ngModel)]="listOfSelectedValue">
     <nz-option *ngFor="let option of listOfOption" [nzLabel]="option.label" [nzValue]="option.value">nz-option>
 nz-select>
import { Component, OnInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

@Component({
  selector: 'table-data',
  templateUrl: './table-data.component.html'
})

export class TableDataComponent implements OnInit {
 //选项数组
  listOfOption = [
    {label:"item1",value:"item1" },
    {label:"item2",value:"item2" },
    {label:"item3",value:"item3" },
    {label:"item4",value:"item4" },
    {label:"item5",value:"item5" },
    {label:"item6",value:"item6" },
    {label:"item7",value:"item7" },
    {label:"item8",value:"item8" },

  ];
  //默认选中
  listOfSelectedValue = [ 'item1', 'item3' ];

  constructor() {}

  ngOnInit(): void {
  }

}

你可能感兴趣的:(angular6+ ng-zorro实现下拉列表的多选功能)