Angular ng2智能表中的复杂数据

我使用ng2智能表以表格形式表示通过rest响应接收的数据。 但其中一个因素是复杂的。目的是在“类别”列下显示categoryName

category: {id: 1, categoryName: "category 1", active: true, createdBy: null, createdOn: null, …}

我在设置中的列看起来像

columns: {
      id: {
        title: 'ID',
        type: 'number',
      },
      salesExecutive: {
        title: 'Sales Executive',
        type: 'string',
      },
      distributor: {
        title: 'Distributor',
        type: 'string',
      },
      product: {
        title: 'Product',
        type: 'string',
      },
      category: {
        title: 'Category',
        //***************** this must display "categoryName" from the complex "category" object
        type: 'string',
      },
      discount: {
        title: 'Discount',
        type: 'string',
      },
      flavor: {
        title: 'Flavor',
        type: 'string',
      },
      promotion: {
        title: 'Promotion',
        type: 'string',
      },
      scheme: {
        title: 'Scheme',
        type: 'string',
      },
    },

---

已观察到使用renderComponent的一些建议。但是我看不到更好的例子。

我在评论部分的一个例子的帮助下解决了这个问题。

发布我的代码，以防它对某人有所帮助

我的json看起来与下面的类似

{
  {id: "1"},
  {salesExecutive: "Renjith"}
  .
  .
  .
  category: {
   id: "1",
   categoryName: "abcd", ........
  }

}

首先，基本类型无法处理此问题。因此，请在“设置”中将类型指定为“自定义”。因此，我们需要提供一个自定义组件，它可以从复杂的category标记中提取categoryName。必须在renderComponent下指定此组件

类别：{ 标题：“类别”， 键入：“自定义”， renderComponent:CustomCategoryDataComponent， },

现在创建一个自定义组件

import { Component, Input, OnInit } from '@angular/core';

import { ViewCell } from 'ng2-smart-table';


@Component({
    template: `
      {{renderValue}}
    `,
  })
export class CustomCategoryDataComponent implements ViewCell, OnInit {

    value: string | number;
    rowData: any;   //represents the entire row

    //this is there the result is stored and is rendered in the template
    renderValue: string;  

    ngOnInit(): void {
        this.renderValue = this.rowData.category.categoryName;
        console.log("Category: "+this.renderValue);
    }

}

---

renderComponent的示例可在线访问：