PrimeNG DataTable 填写数据问题
PrimeNG DataTable filling out the data issue
我在用 JSON 中的数据填充 DataTable 时遇到问题。我无法访问 JSON 的字段之一,它是一个数组。目前,它 returns [object Object]
而不是正确的数据。我使用 ngOnInit
.
在组件中动态创建列
简化代码:
Vehicle.component.ts
export class VehicleComponent implements OnInit {
cols: any[];
cols2: any[];
ngOnInit() {
this.cols = [
{ field: 'vehicle_id', header: "Vehicle ID" },
{ field: 'dallassettings', header: 'Dallas settings' },
{ field: 'dallasupdated', header: 'Dallas updated' },
{ field: 'dallas_list', header: 'Dallas list' }
];
this.cols2 = [
{ field: 'number', header: 'Number' },
{ field: 'auth', header: 'Auth' },
{ field: 'dallas_list', header: 'Dallas list' }
]; //testing out other possibilities
}
public vehicles: GeneralVehicle[];
constructor(private vehicleService: VehicleService, private router: Router) {
this.vehicleService.getVehicle().subscribe(vehicle => {
this.vehicles = vehicle;
});
}
interface GeneralVehicle {
status: number;
dallases: Vehicle[];
}
interface Vehicle {
vehicle_id: number;
dallassettings: string;
dallasupdated: string;
dallas_list: DallasList[];
}
interface DallasList {
number: number;
auth: number;
}
Vehicle.service.ts
export class VehicleService {
private defUrl = 'dummy.url';
constructor(private http: Http) { }
getVehicle(username?: string, password?: string) {
const url = (!username || !password) ? this.defUrl : 'dummy.url' + username + '/' + Md5.hashStr(password);
return this.http.get(url)
.map(res => res.json());
vehicle.html
<div *ngIf="vehicles">
<p-dataTable [value]="vehicles.dallases">
<p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header"></p-column>
</p-dataTable>
</div>
<!--Testig out other possibilities-->
<div *ngIf="vehicles">
<p-dataTable [value]="vehicles.dallas_list">
<p-column *ngFor="let col2 of cols2" [field]="col2.field" [header]="col2.header"></p-column>
</p-dataTable>
</div>
当前输出:
当我尝试从 dallas_list
数组中获取 number
和 auth
时:
这是 JSON 的样子:
{
"status": 0,
"dallases": [{
"vehicle_id": 17954,
"dallassettings": "3",
"dallasupdated": "False",
"dallas_list": [{
"number": 666111222,
"auth": 3
}, {
"number": 666777888,
"auth": 4
}, {
"number": 123454321,
"auth": 4
}]
}
}
如您所见,我只对 dallases
字段中的数据感兴趣。
预期的 cols 输出:vehicle_id、dallassettings、dallasupdated、number、auth。
在 json 对象中,dallases_list 在 dallases 下。因此,从该索引访问 dallases 后,您需要访问 dallases_list
<div *ngIf="vehicles">
<p-dataTable [value]="vehicles.dallases">
<p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header"></p-column>
</p-dataTable>
</div>
<!--Testig out other possibilities-->
<div *ngIf="vehicles">
<p-dataTable [value]="vehicles.dallases[0].dallas_list">
<p-column *ngFor="let col2 of cols2" [field]="col2.field" [header]="col2.header"></p-column>
</p-dataTable>
</div>
你似乎有一个嵌套数组,那么你想如何在数据表中显示该信息?
'dallases' 数组中的每辆车都有一个子列表 (dallas_list),其中包含 'number/auth'.
的多个条目
您可以转换列表以将其展平,这样 'dallas_list' 中的每个条目就有 1 行。
或者,PrimeNG 数据表支持 row expansions - 因此您可以将数据保持在当前形式并让扩展模板显示 number/auth 详细信息。
我在用 JSON 中的数据填充 DataTable 时遇到问题。我无法访问 JSON 的字段之一,它是一个数组。目前,它 returns [object Object]
而不是正确的数据。我使用 ngOnInit
.
简化代码:
Vehicle.component.ts
export class VehicleComponent implements OnInit {
cols: any[];
cols2: any[];
ngOnInit() {
this.cols = [
{ field: 'vehicle_id', header: "Vehicle ID" },
{ field: 'dallassettings', header: 'Dallas settings' },
{ field: 'dallasupdated', header: 'Dallas updated' },
{ field: 'dallas_list', header: 'Dallas list' }
];
this.cols2 = [
{ field: 'number', header: 'Number' },
{ field: 'auth', header: 'Auth' },
{ field: 'dallas_list', header: 'Dallas list' }
]; //testing out other possibilities
}
public vehicles: GeneralVehicle[];
constructor(private vehicleService: VehicleService, private router: Router) {
this.vehicleService.getVehicle().subscribe(vehicle => {
this.vehicles = vehicle;
});
}
interface GeneralVehicle {
status: number;
dallases: Vehicle[];
}
interface Vehicle {
vehicle_id: number;
dallassettings: string;
dallasupdated: string;
dallas_list: DallasList[];
}
interface DallasList {
number: number;
auth: number;
}
Vehicle.service.ts
export class VehicleService {
private defUrl = 'dummy.url';
constructor(private http: Http) { }
getVehicle(username?: string, password?: string) {
const url = (!username || !password) ? this.defUrl : 'dummy.url' + username + '/' + Md5.hashStr(password);
return this.http.get(url)
.map(res => res.json());
vehicle.html
<div *ngIf="vehicles">
<p-dataTable [value]="vehicles.dallases">
<p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header"></p-column>
</p-dataTable>
</div>
<!--Testig out other possibilities-->
<div *ngIf="vehicles">
<p-dataTable [value]="vehicles.dallas_list">
<p-column *ngFor="let col2 of cols2" [field]="col2.field" [header]="col2.header"></p-column>
</p-dataTable>
</div>
当前输出:
当我尝试从 dallas_list
数组中获取 number
和 auth
时:
这是 JSON 的样子:
{
"status": 0,
"dallases": [{
"vehicle_id": 17954,
"dallassettings": "3",
"dallasupdated": "False",
"dallas_list": [{
"number": 666111222,
"auth": 3
}, {
"number": 666777888,
"auth": 4
}, {
"number": 123454321,
"auth": 4
}]
}
}
如您所见,我只对 dallases
字段中的数据感兴趣。
预期的 cols 输出:vehicle_id、dallassettings、dallasupdated、number、auth。
在 json 对象中,dallases_list 在 dallases 下。因此,从该索引访问 dallases 后,您需要访问 dallases_list
<div *ngIf="vehicles">
<p-dataTable [value]="vehicles.dallases">
<p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header"></p-column>
</p-dataTable>
</div>
<!--Testig out other possibilities-->
<div *ngIf="vehicles">
<p-dataTable [value]="vehicles.dallases[0].dallas_list">
<p-column *ngFor="let col2 of cols2" [field]="col2.field" [header]="col2.header"></p-column>
</p-dataTable>
</div>
你似乎有一个嵌套数组,那么你想如何在数据表中显示该信息?
'dallases' 数组中的每辆车都有一个子列表 (dallas_list),其中包含 'number/auth'.
的多个条目您可以转换列表以将其展平,这样 'dallas_list' 中的每个条目就有 1 行。
或者,PrimeNG 数据表支持 row expansions - 因此您可以将数据保持在当前形式并让扩展模板显示 number/auth 详细信息。