[英]Ag grid: Array object values is not displaying properly
如何加載以下數組 object 在單元格中標記“名稱”值。
這里的 object 看起來像
{
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
試試這個用於 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>
由於沒有提供任何 HTML 代碼,您可以嘗試:
<span *ngFor="let obj of data.mark">
{{ obj.name }},
</span>
在那個 HTML column
里面。
它以[object Object]
因為它是一個對象( {name: "AUS", id: 1000}
)。 您可以通過將管道作為| json
來可視化它 {{ obj | json }}
| json
{{ obj | json }}
沒有提供 html,因此可重現的 plunker 或 stackblitz 會有所幫助。 像這樣嘗試:
<div *ngFor="let data of dataList">
<span *ngFor="let item of data.mark">
{{ item .name }},
</span>
</div>
我使用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 中做到這一點。
this.columnDefs = [
{
headerName: "ID",
minWidth: 144,
field: "id",
},
{
headerName: "Mark",
minWidth: 144,
field: "mark",
valueGetter: (row: any) => {
return row.data.mark.name;
},
}];
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.