Utilizing Angular4 along with PrimeNG has been my choice for development. To prevent template repetition in my HTML file, I opted to use the ng-container. However, upon implementing the ng-container, an error surfaced:
Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
How can I effectively employ ng-container with the *ngFor directive to present data within a nested dataTable? Despite various attempts, access to this data seems unattainable.
This represents the structure of the JSON data:
{
"status": 0,
"dallases": [{
"vehicle_id": 17954,
"dallassettings": "3",
"dallasupdated": "False",
"dallas_list": [{
"number": 666111222,
"auth": 3
}, {
"number": 666777888,
"auth": 4
}, {
"number": 123454321,
"auth": 4
}]
}
}
Service
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());
Component
export class VehicleComponent implements OnInit {
cols: 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' }
];
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;
}
Template
<div *ngIf="vehicles">
<p-dataTable [value]="vehicles.dallases" expandableRows="true">
<p-header>List of vehicles: <b>{{currentUser}}</b></p-header>
<p-column expander="true" styleClass="col-icon"></p-column>
<p-column field="vehicle_id" header="Vehicle ID" [sortable]="true"></p-column>
<p-column field="dallassettings" header="Dallas settings" [sortable]="true"></p-column>
<p-column field="dallasupdated" header="Dallas updated" [sortable]="true"></p-column>
<ng-template let-vehicle pTemplate="rowexpansion">
<ng-container *ngFor="let d of vehicles.dallas_list; let i = index; trackBy: trackByFunction">
<p-dataTable [value]="d">
<p-column field="number" header="Number" [sortable]="true"></p-column>
<p-column field="auth" header="Auth" [sortable]="true"></p-column>
</p-dataTable>
</ng-container>
</ng-template>
</p-dataTable>
</div>
I aim to create a dataTable featuring expandable rows that open up into another dataTable, allowing users to manage data within the expanded row.
All functionality works perfectly until I trigger an expansion - at which point, the error emerges.
Your assistance is greatly appreciated!