开发者问题收集

Angular2 尝试比较‘[object Object]’时出错

2017-03-23
13493

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

在这里和互联网上检查这个问题并没有帮助,因为它只是做了一些猜测,比如 Angular 不检查 DataTable 中的数据是否已更改(我甚至不确定这是否属实)。

在我的应用程序发生变化之前,您必须使用正确的用户名和密码登录才能显示已登录帐户背后的数据。现在,当我登录时,它无法与 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个回答

您需要传入 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>
Vignesh
2017-03-23