Ag 网格：数组对象值未正确显示答案

【问题标题】：Ag grid: Array object values is not displaying properlyAg 网格：数组对象值未正确显示
【发布时间】：2019-11-26 23:02:42
【问题描述】：

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

这里的对象看起来像

 {
      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}
      ]
    }

HTML

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

TS 在构造函数()里面，

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]

预期是，

ID        Mark
  --------------
   1       AUS, BRA, CHN, ECE, EG,JAP,RUS

【问题讨论】：

显示 HTML 文件和组件代码
用预期结果更新了帖子
嗨，我问的是.html和.ts文件。
更新了帖子的 HTML 和 ts

标签： javascript html angular typescript ag-grid

【解决方案1】：

为 Ag-grid 试试这个。

设置栏目：-

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

在打字稿文件中：-

public dataMarkList:any;

constructor() {

}

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

并在 ag-grid 中设置 rowData 属性，如

<ag-grid-angular class="ag-theme-material" style="width: 100%; height: calc(100vh - 200px);" rowSelection="single"
   animateRows="true" [rowHeight]="43" [columnDefs]="columnDefs" rowModelType="infinite"
   paginationPageSize="50" [rowData]="dataMarkList">
</ag-grid-angular>

【讨论】：

您能否提供此 [rowData]="dataMarkList" 的正确代码。这是行不通的。列过滤器数据也不会根据网格数据进行更新。

【解决方案2】：

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

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

在那个 HTML column.

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

【讨论】：

我正在使用 ag 网格指令。不是html

【解决方案3】：

没有提供 html，因此可复制的 plunker 或 stackblitz 会有所帮助。试试这样：

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

【讨论】：

更新帖子。我正在使用 ag-grid 指令。

【解决方案4】：

我使用Cell Renderer 来完成此操作。我使用 Vue 而不是 Angular。这就是我在 Vue 中的做法。

我创建了一个名为CellRenderList.vue 的Cell Renderer 组件文件并将其导入到父级中。为了在父文件中定义字段。

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>

Cell Renderer 上的 Ag Grid 文档提供了一些如何在 Angular 中执行此操作的好示例。

【讨论】：