ng2-smart-table

Question

在我的 angular 应用程序中，我使用的是 ng2-smart-table。在一列中，我想使用具有 id 和 description 的对象列表。我设法这样做了：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  template: `
    <ng2-smart-table [settings]="settings"></ng2-smart-table>    
  `
})

export class AppComponent  {
  name = 'Angular';
  test = [
    {title: '1', value: 'test1'},
    {title: '2', value: 'test2'},
    {title: '3', value: 'test3'}
  ];

  settings = {
    columns: {    
      campagna: {
        title: 'campaign',
        filter: false,
        width: '250px',
        type: 'html',
        editor: {
          type: 'list',
          config: {                  
            list: this.test,      
          },
        }
      }        
    }
  };
}

问题是组合框中显示了代表对象id的title。当我添加所选对象时，description 正确显示。

我希望 description 出现在组合框中。有办法吗？

这是 stackblitz：https://stackblitz.com/edit/angular-btgun6

谢谢

Answer 1

首先，您使用值作为标题，您需要将 test 列表替换为

test = [
    {title: 'test1', value: '1'},
    {title: 'test2', value: '2'},
    {title: 'test3', value: '3'}
  ];

现在你需要使用

valuePrepareFunction: (cell, row,test) => {
          debugger
          var t=test.column.dataSet.columns[0].settings.editor.config.list.find(x=>x.value===cell)
          if(t)
           return t.title },

在你campagnaobjectclick here for demo

您也可以对列表执行此操作，如下所示

test = [
        {title: 'test1', value: 'test1'},
        {title: 'test2', value: 'test2'},
        {title: 'test3', value: 'test3'}
      ];

Answer 2

我遇到了同样的问题，即没有在 ng2-smart-table 的列单元格中获取文本。 ng2-smart-table 显示下拉菜单的值而不是文本。我在 ng2-smart-table 的设置对象的 valuePrepareFunction 中使用 find 运算符对用于下拉列表的列表的值属性。

columns: {
  name: {
    title: 'Name',
    type: 'string',
  },
  category :{
    title: 'Category',
    type: 'html',
    valuePrepareFunction: (cell, row,category) => {
      debugger
      var t= this.categories.find(x=>x.value===cell)
      if(t)
       return t.title },
    editor: {
      type: 'list',
      config: {
        selectText: 'Select one',
        list: this.categories,
      }
    },
    filter: {
      type: 'list',
      config: {
        selectText: 'Select one',
        list: this.categories,
      },
    }
  }

该列的单元格包含值，我们使用该值从类别列表中找到它的 title/text（在我的例子中它被命名为类别，对你来说它将被测试）

ng2-smart-table - 在具有编辑器类型列表的列上使用对象

ng2-smart-table - Use object on column with editor type list

angular