Question

如何在单元格中加载以下数组对象标记“名称”值。

这里的对象看起来像

beforeSaveCell()

HTML

 {
      id: "1"
      mark: [
        0: {name: "AUS", id: 1000}
        1: {name: "BRA", id: 1050}
        2: {name: "CHN", id: 1100}
        3: {name: "ECE", id: 1200}
        4: {name: "EG", id: 1250}
        5: {name: "JAP", id: 1450}
        6: {name: "RUS", id: 1500}
      ]
    }

TS 在构造函数（）中，

<ag-grid-angular #agGrid style="width: 100%; height: 100%;" id="myGrid" class="ag-theme-balham cis-ag-grid"
      [columnDefs]="columnDefs" [defaultColDef]="defaultColDef" [rowSelection]="rowSelection" [rowData]="rowData"
      [context]="context" [frameworkComponents]="frameworkComponents" (selectionChanged)="onSelectionChanged()"
      (rowClicked)='onRowClicked($event)' (gridReady)="onGridReady($event)" [gridOptions]="gridOptions">
    </ag-grid-angular>

当前，它显示在网格列单元格中，

this.defaultColDef = {
      resizable: true,
      sortable: true,
      filter: true,
      headerComponentParams: { menuIcon: 'fa fa-filter' }
    };

this.columnDefs = [  
{
  headerName: "ID",            
  minWidth: 144,
  field: "id", 
  valueGetter: "data.id"
},
{
  headerName: "Mark",            
  minWidth: 144,
  field: "mark", 
  valueGetter: "data.mark.name"
}];

预期是

ID        Mark
--------------
1         [object Object], [object Object], [object Object], [object Object], 
          [object Object], [object Object], [object Object]

Answer 1

由于没有提供任何HTML代码，因此您可以尝试：

<span *ngFor="let obj of data.mark">
 {{ obj.name }},
</span>

在HTML column内。

它以[object Object]的形式出现，因为它是一个对象（{name: "AUS", id: 1000}）。您可以通过将管道作为| json放在{{ obj | json }}

中来对其进行可视化

Answer 2

没有提供html，因此可重现的pl弹或stackblitz会有所帮助。尝试这样：

<div *ngFor="let data of dataList">
     <span *ngFor="let item of data.mark">
        {{ item .name }},
      </span>
 </div>

Answer 3

尝试使用Ag-grid。

设置列：-

createExportTask

在打字稿文件中：-

constructor() {
 this.columnDefs = [                    
  {
    headerName: 'Id', sortable: true, resizable: true, valueGetter: 'data.mark.id'
  },
  {
    headerName: 'Mark', sortable: true, resizable: true, valueGetter: 'data.mark.name'
  }
 ]
}

并在

之类的ag-grid中设置

public dataMarkList:any;

constructor() {

}

yourGetFunction() {
   this.dataMarkList = data.mark
}

属性

rowData

Answer 4

我使用Cell Renderer完成了此任务。我使用Vue而不是Angular。这就是我在Vue中所做的。

我创建了一个名为Cell Renderer的{{1}}组件文件，并将其导入了父文件。我在父文件中定义了字段。

CellRenderList.vue

导入组件并添加该单元格渲染器行应该是您对原始文件唯一要做的事情。

我的headerName: 'SomeName', field: 'mark', cellRendererFramework: 'CellRendererList',组件文件如下所示。

CellRenderList.vue

<template> <div class=""> <span v-for="(value, index) in mark"> <span v-if="index != 0">, </span><span>{{ value.name }}</span> </span> </div> </template> <script> export default { name: 'CellRendererList', computed: { mark() { return this.params.data.mark } } } </script>上的Ag Grid文档中有一些很好的示例，说明了如何在Angular中完成该工作。

Ag网格：数组对象值显示不正确

4 个答案: