"Error trying to diff..." 的 ng 容器问题
ng-container issue with "Error trying to diff..."
我使用 Angular4 + PrimeNG。我不需要在我的 html 文件中重复模板,所以我决定使用 ng-container
来这样做。但是,当我使用 ng-container
时出现错误:
Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
如何正确使用 ng-container
with *ngFor
子句来显示嵌套 dataTable
中的数据?无论如何我都无法访问此数据。
这是 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
}]
}
}
服务
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());
组件
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;
}
模板
<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>
我正在尝试创建具有可扩展行的 dataTable
,当您扩展该行时,还有另一个 dataTable
,因此用户可以管理扩展行中的数据。
一切正常,直到我点击展开 - 此时 returns 出错。
谢谢
您的模板存在一些问题,请检查您的 JSON 的外观。没有路径如:
vehicles.dallas_list
你不需要这里的ng-container
,只需要使用vehicle
(指的是ng-template
中的let-vehicle
)并在内部[value]
, 迭代 dallas_list
.
因此您的模板应如下所示:
<div *ngIf="vehicles">
<p-dataTable [value]="vehicles.dallases" expandableRows="true">
<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">
<p-dataTable [value]="vehicle.dallas_list">
<p-column field="number" header="Number" [sortable]="true"></p-column>
<p-column field="auth" header="Auth" [sortable]="true"></p-column>
</p-dataTable>
</ng-template>
</p-dataTable>
</div>
Demo
我使用 Angular4 + PrimeNG。我不需要在我的 html 文件中重复模板,所以我决定使用 ng-container
来这样做。但是,当我使用 ng-container
时出现错误:
Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
如何正确使用 ng-container
with *ngFor
子句来显示嵌套 dataTable
中的数据?无论如何我都无法访问此数据。
这是 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
}]
}
}
服务
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());
组件
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;
}
模板
<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>
我正在尝试创建具有可扩展行的 dataTable
,当您扩展该行时,还有另一个 dataTable
,因此用户可以管理扩展行中的数据。
一切正常,直到我点击展开 - 此时 returns 出错。
谢谢
您的模板存在一些问题,请检查您的 JSON 的外观。没有路径如:
vehicles.dallas_list
你不需要这里的ng-container
,只需要使用vehicle
(指的是ng-template
中的let-vehicle
)并在内部[value]
, 迭代 dallas_list
.
因此您的模板应如下所示:
<div *ngIf="vehicles">
<p-dataTable [value]="vehicles.dallases" expandableRows="true">
<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">
<p-dataTable [value]="vehicle.dallas_list">
<p-column field="number" header="Number" [sortable]="true"></p-column>
<p-column field="auth" header="Auth" [sortable]="true"></p-column>
</p-dataTable>
</ng-template>
</p-dataTable>
</div>