PrimeNG DataTable 填写数据问题

Question

我在用 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。

Answer 1

在 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>

Answer 2

你似乎有一个嵌套数组，那么你想如何在数据表中显示该信息？

'dallases' 数组中的每辆车都有一个子列表 (dallas_list)，其中包含 'number/auth'.

的多个条目

您可以转换列表以将其展平，这样 'dallas_list' 中的每个条目就有 1 行。

或者，PrimeNG 数据表支持 row expansions - 因此您可以将数据保持在当前形式并让扩展模板显示 number/auth 详细信息。

PrimeNG DataTable 填写数据问题

PrimeNG DataTable filling out the data issue

json

angular

primeng