在没有数组对象的情况下使用PrimeNg p表,可以通过以下步骤实现:
以下是一个示例代码:
<!-- 在HTML模板中使用p-table组件 -->
<p-table [value]="data" [columns]="cols">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr>
<td *ngFor="let col of columns">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
</p-table>
// 在组件的逻辑代码中填充数据
import { Component } from '@angular/core';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css']
})
export class TableComponent {
data: any[] = []; // 创建空数组对象
cols: any[] = [
{ field: 'name', header: 'Name' },
{ field: 'age', header: 'Age' },
{ field: 'gender', header: 'Gender' }
]; // 设置表格的列和列头
constructor() {
this.getData(); // 获取数据并填充到数组对象中
}
getData() {
// 调用API或其他方式获取数据
// 假设获取到的数据为dataList
this.data = dataList;
}
}
上述示例代码中,通过创建空数组对象data,并在组件的构造函数中调用getData()方法获取数据并填充到data数组中。然后在HTML模板中,使用p-table组件展示data数组的数据。
请注意,上述示例中的dataList是一个假设的数据,实际使用时需要根据具体情况进行替换。另外,cols数组中的字段名需要与数据对象中的属性名对应。
推荐的腾讯云相关产品:腾讯云云服务器(CVM),产品介绍链接地址:https://cloud.tencent.com/product/cvm
领取专属 10元无门槛券
手把手带您无忧上云