如何在单个 ngx-datatable 单元格中显示嵌套对象？

Question

IA属性：

export interface IAttribute {
id: number;
attributeName: string;
attributeValues: IAttributeValue[];
}

IAttributeValue:

export interface IAttributeValue {
Value: string;
attributeId: number;
Id: number;
}

AttributeComponent.ts

 export class AttributesComponent implements OnInit {
 attributes = [] as Array<IAttribute>;
 rows = [];
 temp = [];

 columns = [{ prop: 'attributeName', name: "Attribute Name" }, { prop:'attributeValues' 
,name: 'Attribute Values' }];
 @ViewChild(DatatableComponent, { static: false }) table: DatatableComponent;

 ColumnMode = ColumnMode;

 constructor(private productService: ProductService,
          private toastr: ToastrService) { }

 ngOnInit(): void {
 this.productService.getAttributes().subscribe({
 next: data => {
  this.attributes = data;
  console.log(this.attributes);
  this.rows = this.attributes;
  

  this.temp = [...this.attributes];
  console.log(this.attributes);
},
error: error => {
  this.toastr.error(error.message, "Error loading data");
}
 })
 }


 updateFilter(event) {
const val = event.target.value.toLowerCase();

// filter our data
// update the rows
this.rows = this.temp.filter(function(d) {
  return d.name.toLowerCase().indexOf(val) !== -1 || !val;
});
// Whenever the filter changes, always go back to the first page
this.table.offset = 0;
   }



}

Attribute.Component.Html

 <div class="card-body custome-datatable">
                <input type='text' class="filter-ngx form-control" 
  placeholder='Type to filter the name column...'
                       (keyup)='updateFilter($event)' />
                <ngx-datatable #table class='bootstrap' 
  [columns]="columns" [columnMode]="ColumnMode.force"
                               [headerHeight]="50" 
  [footerHeight]="50" rowHeight="auto" [limit]="10" [rows]="rows">



                </ngx-datatable>
            </div>

这是它向我显示数据的方式：

在这里你可以看到我的对象：

现在我的问题是如何在这里只显示“值”，即“attributeValue”的属性。像红色、绿色、蓝色等。我尝试阅读 ngx-datatable 文档，但它们只显示源代码，那里没有很好的解释。

Answer 1

你有两个选择。

使用 column template 并将值格式化如下：

<ngx-datatable
  #myTable
  class="material expandable"
  [columnMode]="'force'"
  [headerHeight]="50"
  [footerHeight]="50"
  [rowHeight]="50"
  [scrollbarV]="true"
  [rows]="rows"
>
  <ngx-datatable-column name="name">
    <ng-template
      let-rowIndex="rowIndex"
      let-row="row"
      ngx-datatable-cell-template
    >
      <strong>{{ row.name }}</strong>
    </ng-template>
  </ngx-datatable-column>

  <ngx-datatable-column name="company">
    <ng-template
      let-rowIndex="rowIndex"
      let-row="row"
      ngx-datatable-cell-template
    >
      <strong>{{ formatValue(row.company) }}</strong>
    </ng-template>
  </ngx-datatable-column>
</ngx-datatable>

并在 component.ts 文件中：

  formatValue(values) {
    return values.map((i) => i.name).join(',');
  }

首先在构造函数中格式化值，然后将其传递给 Grid :

this.rowToRender = this.rows.map((r) => {
 let formattedVal = r.company.map((k) => k.name).join(',');
 return {
   ...r,
   company: formattedVal,
 };
});

工作Demo

如何在单个 ngx-datatable 单元格中显示嵌套对象？

How can I show nested objects in single ngx-datatable cell?

typescript

ngx-datatable

angular