[FIXED] PrimeNG table not shown on the browser

Issue

I have a PrimeNG table in TablePrimeNgComponent.

table-prime-ng.component.html :

<p-table [value]="cars">
    <ng-template pTemplate="header">
        <tr>
            <th>Vin</th>
            <th>Year</th>
            <th>Brand</th>
            <th>Color</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-car>
        <tr>
            <td>{{car.vin}}</td>
            <td>{{car.year}}</td>
            <td>{{car.brand}}</td>
            <td>{{car.color}}</td>
        </tr>
    </ng-template>
  </p-table>

TablePrimeNgComponent:

import { Component, OnInit } from '@angular/core';
import { CarService } from '../car.service';


export interface Car {vin; year; brand; color;}


@Component({
  selector: 'app-table-prime-ng',
  templateUrl: './table-prime-ng.component.html',
  styleUrls: ['./table-prime-ng.component.css']
})
export class TablePrimeNgComponent implements OnInit {

  cars : Car[];

  constructor(private carservice: CarService) { }

  ngOnInit() {this.cars = this.carservice.getCars();}

}

CarService is created and successfully returns the car array. I can show the returned data. PrimeNG is also installed.
When I compile and run the program, I do not get any errors. At the same time, the tables doe not render anything to the browser.
Can you help me finding out what the problem is?

Solution

You should use <p-column>

<p-dataTable [value]="cars">
  <p-column field="vin" header="Vin"></p-column>
  <p-column field="year"  header="Year">    </p-column>
  <p-column field="color" header="Color"></p-column>
</p-dataTable>

DEMO

EDIT :

With ng-template also it works well, make sure you declared cols in the template,

 export class DataTableComponent implements OnInit {
  cars: Array<any> = [{"vin":"dsad231ff","year":2012,"brand":"VW","color":"Orange"},{"vin":"gwregre345","year":2011,"brand":"Audi","color":"Black"}];
 cols: any[];
  constructor() { 
    this.cols = [
            { field: 'vin', header: 'Vin' },
            { field: 'year', header: 'Year' },
            { field: 'brand', header: 'Brand' },
            { field: 'color', header: 'Color' }
        ];
  }
  ngOnInit() {
  }
}

DEMO

Answered By – Sajeetharan

Answer Checked By – Marie Seifert (Easybugfix Admin)

Leave a Reply

(*) Required, Your email will not be published