@tusharghoshbd ngx数据表未显示相关数据

Question

我正在实现@tusharghoshbd ngx数据表，以在Angular-12 中显示数据

我有这个API JSON GET请求，如下所示：

{
"message": "You have successfully Retrieved User Detail",
"error": false,
"code": 200,
"results": {
"user": {
"id": 2,
"department_id": 2,
"first_name": "Frank",
"active": "1",
"last_name": "Akram",
"roles": [{
"id": 1,
"name": "Manager",
},
{
"id": 2,
"name": "Supervisor"
}
],
"department": {
"id": 6,
"name": "Account",
}
},
}
}

组件：

export class SiteInfoComponent implements OnInit {
@ViewChild('actionTpl', {
static: true
}) actionTpl: TemplateRef < any > ;
@ViewChild('addressTpl', {
static: true
}) addressTpl: TemplateRef < any > ;
isLoading: boolean = false;
options: any = {};
userInfoList: any[] = [];
columns: any = {};

constructor(private userInfoService: SUserInfoService) {}
ngOnInit(): void {
this.isLoading = true;
this.userInfoService.getAllUserDetail().subscribe(
data => {
this.userInfoList = data.results.users;
console.log(data);
},
error => {
this.isLoading = false;
}
);
this.options = {
loader: true
};
this.columns = [{
key: 'id',
title: '<div class="blue"> ID</div>',
width: 60,
sorting: true,
align: {
head: 'center',
body: 'center'
},
vAlign: {
head: 'bottom',
body: 'middle'
}
},
{
key: 'first_name',
title: '<div class="blue">First Name</div>',
width: 100
},
{
key: 'last_name',
title: '<div class="blue">Last Name</div>',
width: 100
},
{
key: 'department.name',
title: '<div class="blue">Department</div>',
align: {
head: 'left'
},
width: 100,
sorting: true
},
{
key: 'roles.name',
title: '<div class="blue">Roles</div>',
align: {
head: 'left'
},
width: 100,
sorting: true
},
{
key: 'active',
title: '<div class="blue">Active</div>',
align: {
head: 'left'
},
width: 100,
sorting: true
},
{
key: '',
title: '<div class="blue">Action</div>',
align: {
head: 'center',
body: 'center'
},
sorting: false,
width: 80,
cellTemplate: this.actionTpl
}
];
}
}

HTML:

<ngx-datatable tableClass="table table-striped table-bordered table-hover" [data]="userInfoList" [columns]="columns" [options]="options">
<ngx-caption>
<div class="row">
<div class="col-sm-6 col-xs-6 col-6 ">
<b>
<i class="fa fa-table" aria-hidden="true"></i>
Site Info. List
</b>
</div>
</div>
</ngx-caption>
<ng-template #addressTpl let-row let-rowIndex="rowIndex" let-columnValue="columnValue">
</ng-template>
<ng-template #actionTpl let-row let-rowIndex="rowIndex" let-columnValue="columnValue">
</ng-template>
</ngx-datatable>

我能够显示所有其他关系数据(外键)：first_name、last_name等。但我有两个问题：

1. 当我扮演角色时。name和department.name没有显示

2. 对于活动1=True和0=False。

由于没有办法从HTML IN@tusharghoshbd中做到这一点，与普通表td不同，tr.我检查了@tusharkhoshbd的手册，但没有运气。

我该如何解决这两(2)个问题？

感谢

Answer 1

问题&关注

我想提出您正在访问data.results.users，这对于您的JSON结果来说是无效的。

this.userInfoList = data.results.users;

{
"message": "You have successfully Retrieved User Detail",
"error": false,
"code": 200,
"results": {
"user": {
...
},
}
}

同时，由于JSON返回的是单个对象，而不是数组。

问题解决方案：将单个对象转换为数组

site-info.component.ts

this.userInfoList = [data.results.user];

---

问题解决方案

要显示部门名称和每个角色的名称，可以使用cellTemplate。要自定义"活动"的显示值，还可以将cellTemplate与管道一起使用。

到boolean.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'toBoolean'
})
export class ToBooleanPipe implements PipeTransform {
transform(value: any): string {
switch (value) {
case true:
case 'true':
case 1:
case '1':
return "True";
default:
return "False";
}
}
}

app.module.ts

import { ToBooleanPipe } from './pipes/to-boolean.pipe';
@NgModule({
imports:      [ ... ],
declarations: [ ..., ToBooleanPipe ],
bootstrap:    [ AppComponent ]
})
export class AppModule { }

site-info.component.html

<ngx-datatable tableClass="table table-striped table-bordered table-hover" [data]="userInfoList" [columns]="columns"
[options]="options">
...
<ng-template #activeTpl let-row let-rowIndex="rowIndex" let-columnValue="columnValue">
{{columnValue | toBoolean}}
</ng-template>
<ng-template #departmentTpl let-row let-rowIndex="rowIndex" let-columnValue="columnValue">
{{columnValue.name}}
</ng-template>
<ng-template #rolesTpl let-row let-rowIndex="rowIndex" let-columnValue="columnValue">
<ng-template ngFor let-obj [ngForOf]="columnValue">
{{ obj.name }}
<br />
</ng-template>
</ng-template>
</ngx-datatable>

site-info.component.ts

export class SiteInfoComponent implements OnInit {
...
@ViewChild('activeTpl', {
static: true
})
activeTpl: TemplateRef<any>;
@ViewChild('departmentTpl', {
static: true
})
departmentTpl: TemplateRef<any>;
@ViewChild('rolesTpl', {
static: true
})
rolesTpl: TemplateRef<any>;
...
ngOnInit(): void {
...
this.columns = [
...
{
key: 'department',
title: '<div class="blue">Department</div>',
align: {
head: 'left'
},
width: 100,
sorting: true,
cellTemplate: this.departmentTpl
},
{
key: 'roles',
title: '<div class="blue">Roles</div>',
align: {
head: 'left'
},
width: 100,
sorting: true,
cellTemplate: this.rolesTpl
},
{
key: 'active',
title: '<div class="blue">Active</div>',
align: {
head: 'left'
},
width: 100,
sorting: true,
cellTemplate: this.activeTpl
},
...
];
this.userInfoService.getAllUserDetail().subscribe(
data => {
this.userInfoList = [data.results.user];
console.log(data);
},
error => {
this.isLoading = false;
}
);
}
}

StackBlitz 上的样品溶液