nebular-select Multiple Select

解决问题no解决代码问题

于 2021-08-20 17:36:43 发布

阅读量409

点赞数

分类专栏：前端文章标签： nebular-select Multiple Select

本文链接：https://blog.csdn.net/qq_39308071/article/details/119828352

版权

前端专栏收录该内容

12 篇文章

订阅专栏

这篇博客展示了如何在Angular应用中实现一个多选下拉框组件。通过`nb-select`和`nb-option`指令，配合`ngFor`循环遍历选项列表，并通过`selected`属性和`click`事件来管理选中状态。点击每个选项会更新其选中状态并在控制台打印相关信息。示例代码中，`list`数组包含多个选项，每个选项都有`value`、`label`和`selected`属性。

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

html

<nb-select multiple placeholder="Multiple Select">
  <nb-option *ngFor="let i of list" [value]="i.value" [(selected)]="i.selected" 
  (click)="onClick(i)">{{i.value}}--{{i.label}}</nb-option>
</nb-select>

ts

list:any=[
    {value:"value1",label:"label1",selected:false},
    {value:"value2",label:"label2",selected:false},
    {value:"value3",label:"label3",selected:false}
];


onClick(i:any){
    i.selected = !i.selected;
    console.log("selected："+i.selected+"; value:"+i.value+"; label："+i.label);
}