angular - Angular2 - PrimeNG dataTable rowexpansion doesn't expand -

i have problem primeng's datatable. in previous question encouraged me use rowexpansion table - checked out , fits concept of app. however, cannot make work - cannot expand row. tried numerous concepts within template, nothing helped.

i suppose problem lies within <ng-template let-vehicles ptemplate="rowexpansion"> line, might wrong.

simplified code:

vehicle.component.ts

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; } 

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()); 

template

<div *ngif="vehicles">     <p-datatable [value]="vehicles.dallases" expendablerows="true">         <p-header>list of vehicles</p-header>         <p-column expander="true" styleclass="col-icon"></p-column>         <!--<p-column *ngfor="let col of cols" [field]="col.field" [header]="col.header"></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>         <p-column field="dallas_list" header="dallas list" [sortable]="true"></p-column>         <ng-template let-vehicles ptemplate="rowexpansion">             <div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:20px">                 <div class="ui-grid-row">                     <div class="ui-grid-col-9">                         <div class="ui-grid ui-grid-responsive ui-grid-pad">                             <div class="ui-grid-row">                                 <div class="ui-grid-col-2 label">number: </div>                                 <div class="ui-grid-col-10">{{vehicles.dallas_list.number}}</div>                             </div>                             <div class="ui-grid-row">                                 <div class="ui-grid-col-2 label">auth: </div>                                 <div class="ui-grid-col-10">{{vehicles.dallas_list.auth}}</div>                             </div>                         </div>                     </div>                 </div>             </div>         </ng-template>     </p-datatable> </div> 

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     }] } } 

i expect <p-column expander="true" styleclass="col-icon"></p-column> expand , show numbers , auths of vehicle.

use

<p-datatable [value]="vehicles.dallases" expandablerows="true">