PrimeNG DataTable填寫數據問題

我用從JSON填充DataTable的數據時遇到問題。我無法訪問其中一個數組的JSON字段。目前，它返回[object Object]而不是正確的數據。我在ngOnInit組件中動態創建cols。PrimeNG DataTable填寫數據問題

簡化的代碼：

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。

來源

2017-03-27 Haseoh

在json對象中，dallases_list在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>

來源

2017-03-27 07:13:52 Vignesh

該解決方案的工作原理，但你有任何想法如何合併成一個表？相乘的數字可以是用分號分隔的一行。我想我不能在''標記內使用'[value] =「vehicles.dallases [0] .dallas_list」'，所以它很難讓它工作。你認爲'RowGroup'會以某種方式解決這個問題嗎？ – Haseoh

檢查鏈接https://www.primefaces.org/primeng/#/datatable/rowexpansion – Vignesh

看來你已經有了一個嵌套數組有沒有索引訪問dallases後，你怎麼這麼想要顯示在數據表中的信息？

'dallases'數組中的每輛車都有一個包含多個'number/auth'條目的子列表（dallas_list）。

你可以轉換你的列表來平坦化，所以你在'dallas_list'中的每個條目都有1行。

或者，PrimeNG數據表支持row expansions - 因此，您可以將數據保留在當前表單中並使擴展模板顯示數字/身份驗證詳細信息。

來源

2017-03-27 07:18:47

感謝您的回覆，我檢查了這一點 - 我想我會將它與Vingresh的解決方案一起使用，因爲它是實現它的唯一方法按原樣工作。 – Haseoh

PrimeNG DataTable填寫數據問題

回答

相關問題