如何在 ng2-smart-table 的下拉列表中设置多项选择？答案

【问题标题】：How to set multiple selection in dropdown in ng2-smart-table?如何在 ng2-smart-table 的下拉列表中设置多项选择？
【发布时间】：2020-03-26 16:23:31
【问题描述】：

在我的应用中，我在 ng2-smart-table 的下拉列表中加载了动态值。现在我必须在 ng2-smart-table 的下拉菜单中启用多项选择。

注意：下拉列表中的多选不是复选框。

【问题讨论】：

对 angular6 不太了解，但我相信这可能会对您有所帮助：valor-software.com/ng2-select
不，它只是下拉菜单，在我的情况下，它是具有许多功能的表格。
发布您的下拉代码块以获得更多关于您的问题的想法。

标签： angular6 ng2-smart-table

【解决方案1】：

我认为您可以尝试使用自己的自定义编辑器组件。我添加了一个基本的select 和多个attribute，但您可以根据需要创建更复杂的自定义组件。

使用valuePrepareFunction 将数据传递给您的组件，瞧。

settings.ts

private settings = {
 // Previous config ...

 columns: {
  multiple: {
    title: 'Multi select',
    type: 'html',
     editor: {
      type: 'custom',
      valuePrepareFunction: (cell, row) => row,
      component: MultiSelComponent,
     },
  }
 }
}

multiSel.component.html

<select multiple [(ngModel)]="yourModelStore">
  <option *ngFor="let item of myValues" [value]="item.value">{{item.name}}</option>
</select>

multiSel.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { ViewCell } from 'ng2-smart-table';

....

export class MultiSelComponent implements OnInit {

  @Input() value;

  yourModelStore: any; // rendered as this.yourModelStore = ['value', 'value'];

  ngOnInit() {
    this.myValues = this.value;
  }

module.ts

declarations:[
  //others ...

  MultiSelComponent
]
entryComponents: [
  MultiSelComponent
]

**我已编辑答案并添加了有关设置和 component.ts 的更多信息

【讨论】：

感谢您的回复，我会尽快为您更新。
抱歉耽搁了，由于另一个项目的一些紧急工作，我还没有机会实施它。但是是的，我会尽快尝试。
嗨，我是 Angular 新手，我可以获取下拉列表但无法获取所选值。可能我没有正确使用“yourModelStore”。你能详细说明什么是“yourModelStore”@Emanuele

【解决方案2】：

 yourField: {
    title: 'Your field title',
    editor: {
      type: 'list',
      config: {
        selectText: 'Select',
        list: [
          { value: '1', title: 'Admin' },
          { value: '2', title: 'Manager' },
        ],
      },
    },
    type: 'number',
  },

【讨论】：