Question

我在 TablePrimeNgComponent 中有一个 PrimeNG 表。

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 已创建，并成功返回了汽车数组。我可以显示返回的数据。 PrimeNG 也已安装。当我编译并运行该程序时，没有任何错误。同时，这些表不会向浏览器呈现任何内容。您能帮我找出问题所在吗？

Answer 1

您应该使用 <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

编辑：

使用ng-template效果也很好，请确保您在模板中声明了cols，

 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

PrimeNG表未显示在浏览器中

1 个答案: