Angular2 - PrimeNG dataTable rowexpansion doesn't expand

Question

I have a problem with PrimeNG's DataTable. In my previous question someone encouraged me to use rowexpansion for my table - I checked this out and it fits perfectly into my concept of app. However, I cannot make it work properly - I cannot expand the row. I tried numerous concepts within the template, but nothing helped.

I suppose the problem lies within <ng-template let-vehicles pTemplate="rowexpansion"> line, but I might be 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> to expand and show numbers and auths of certain vehicle.

I changed to angular4 recently (ng-template instead of template), but I have a backup where I use angular2. — Haseoh
is it because of the typo expendableRows instead of expandableRows? — RemyaJ
You're right. I spent 2 days trying to solve this, but I didn't notice this typo, such a shame. Now I need to properly display the data. Thanks for help — Haseoh

RemyaJ RemyaJ · Accepted Answer · 2017-04-07T06:11:45

1

votes

Use

<p-dataTable [value]="vehicles.dallases" expandableRows="true">

Angular2 - PrimeNG dataTable rowexpansion doesn't expand

1 Answers