如何解决如何在 ngx 数据表中显示嵌套数组对象?
我正在尝试从 ngx 数据表列中的嵌套数组中获取对象数据,有人可以帮助我怎么做吗?请找到我的例子
https://stackblitz.com/edit/angular-ngx-datatable-kglni5?file=app%2Fapp.component.ts[enter 此处的链接说明]1
解决方法
您可以使用 cellTemplate
为您的列定义 <ng-template>
以自定义列中的显示值。
解决方案 1
.component.html
<ng-template #batterTemplate let-row="row" let-value="value" let-i="index">
<ng-template ngFor let-obj [ngForOf]="value">
<strong> ID: {{ obj.id }} </strong>
<span>Type: {{ obj.type }}</span>
<br />
</ng-template>
</ng-template>
<ng-template #toppingTemplate let-row="row" let-value="value" let-i="index">
<ng-template ngFor let-obj [ngForOf]="value">
<strong> ID: {{ obj.id }} </strong>
<span>Type: {{ obj.type }}</span>
<br />
</ng-template>
</ng-template>
并确保您需要在cellTemplate
或OnInit
方法中使用AfterViewInit
定义列,以便ngx-datatable
生效.
.component.ts
export class AppComponent implements OnInit {
@ViewChild('batterTemplate') batterTemplate!: TemplateRef<any>;
@ViewChild('toppingTemplate') toppingTemplate!: TemplateRef<any>;
...
columns = [];
ngOnInit() {
this.columns = [
{ name: 'Name',prop: 'name' },{ name: 'Batters',prop: 'batters.batter',cellTemplate: this.batterTemplate },{ name: 'Toppings',prop: 'topping',cellTemplate: this.toppingTemplate }
];
}
}
Sample Solution 1 on StackBlitz
解决方案 2:
是的,您可以将 <ng-template ngx-datatable-cell-template>
包裹在 <ngx-datatable-column>
中。
.component.html
<ngx-datatable
[rows]="rows"
class="material"
[loadingIndicator]="loadingIndicator"
[columnMode]="'force'"
[headerHeight]="50"
[footerHeight]="50"
[rowHeight]="'auto'"
[columns]="columns"
[reorderable]="reorderable">
<ngx-datatable-column name="Name" prop="name"></ngx-datatable-column>
<ngx-datatable-column name="Batter" prop="batters.batter">
<ng-template let-row="row" let-value="value" let-i="index" ngx-datatable-cell-template>
<ng-template ngFor let-obj [ngForOf]="value">
<strong> ID: {{ obj.id }} </strong>
<span>Type: {{ obj.type }}</span>
<br />
</ng-template>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Toppings" prop="topping">
<ng-template let-row="row" let-value="value" let-i="index" ngx-datatable-cell-template>
<ng-template ngFor let-obj [ngForOf]="value">
<strong> ID: {{ obj.id }} </strong>
<span>Type: {{ obj.type }}</span>
<br />
</ng-template>
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。