Angular2错误尝试diff'[object Object]'

时间:2017-03-23 07:41:14

标签: json angular primeng

我想升级我的应用程序,因此css / bootstrap中显示的数据将更改为Prime NG DataTable,我可以在其中过滤和排序数据。首先,我尝试使用虚拟类+虚拟数据DataTable。它工作正常。但是,当我尝试将此功能与从JSON获取数据的应用程序集成时,它会与Error trying to diff '[object Object]'崩溃。

在这里和互联网上检查这个问题并没有帮助,因为它只做了一些像Angular这样的猜测没有检查DataTable内的数据是否发生了变化(我甚至不确定它是否属实)。 / p>

在我的应用程序更改之前,您必须使用正确的用户名和密码登录才能显示已记录帐户背后的数据。现在,当我登录时,它不适用于Prime NG DataDatble

简化代码:

Vehicle.Service.ts

@Injectable()
export class VehicleService {
    private defUrl = 'someURL';

    constructor(private http: Http) { }
    getVehicle(username?: string, password?: string) {
        const url = (!username || !password) ? this.defUrl : 'someURL' + username + '/' + Md5.hashStr(password);
        return this.http.get(url)
            .map(res => res.json());

    }

Vehicle.component.ts

  public vehicles: GeneralVehicle[];

  constructor(private vehicleService: VehicleService, private router: Router) {
    this.vehicleService.getVehicle().subscribe(vehicle => {
      this.vehicles = vehicle;
      this.vehicles = this.vehicleService.parseUser();
    });
  }

模板:vehicle.html

<div *ngIf="vehicles">
    <p-dataTable [value]="vehicles">
        <p-column field="vehicles.vehicle_id" header="ID"></p-column>
        <p-column field="vehicles.dallassettings" header="Name"></p-column>
    </p-dataTable>
</div>

来自url的示例性JSON(状态发生一次,所有“有趣”数据都在dallases数组内)。

{
    "status": 0,
    "dallases": [{
        "vehicle_id": 17954,
        "dallassettings": "3",
        "dallasupdated": "False",
        "dallas_list": [{
            "number": 666111222,
            "auth": 3
        }, {
            "number": 666777888,
            "auth": 4
        }, {
            "number": 123454321,
            "auth": 4
        }]
    }
}

1 个答案:

答案 0 :(得分:3)

您需要传递html作为

<div *ngIf="vehicles.dallases">
    <p-dataTable [value]="vehicles.dallases">
        <p-column field="vehicles.dallases.vehicle_id" header="ID"></p-column>
        <p-column field="vehicles.dallases.dallassettings" header="Name"></p-column>
    </p-dataTable>
</div>