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,      
          },
        }
      }        
    }
  };
}

Проблема в том, что title, представляющий id объекта, отображается в выпадающем списке. когда я добавляю выбранный объект, description отображается правильно.

Я бы хотел, чтобы description появился в выпадающем списке. Есть способ сделать это?

Это стекаблитц: 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 },

в Вы campagna объект нажмите здесь для демонстрации

Вы также можете сделать это для списка, как указано ниже

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

Answer 2

Я столкнулся с той же проблемой - не получить текст в ячейке столбцов ng2-smart-таблицы. ng2-smart-таблица отображала значение выпадающего меню вместо текста. Я использовал оператор find в valuePrepareFunction объекта настроек ng2-smart-таблицы для свойства value моего списка, который использовался для выпадающего списка.

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,
      },
    }
  }

ячейка столбца содержит значение, и мы использовали это значение, чтобы найти его заголовок / текст из списка категорий (в моем случае это были названные категории, для вас это будет тест)