angular - 如何在 *ngfor 中显示数组对象的数组
问题描述
我有一个这样的数组
tdata = {
jam: [1, 2, 4, 5],
ram: [11, 12, 34, 14],
sam: [21, 22, 23, 24],
jug: ["a", "b", "c", "d"],
tam: [31, 32, 33, 34]
};
` 我想打印/显示对象键(如 jam、ram、sam)作为表头及其在相应表中的值与 Pprimeng 表的角度。我尝试了各种方法,但无法正确显示。动态值的 Primeng 表
<p-table [columns]="cols" [value]="products">
<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>
如果我想显示我需要数组自动在表单中
tdata = [
{jam:1,ram:11,sam:21,jug:"a",tam:31},
{jam:2,ram:12,sam:22,jug:"b",tam:32},
{jam:3,ram:34,sam:23,jug:"c",tam:33},
{jam:5,ram:14,sam:24,jug:"d",tam:34 }
]
tdata 中的值可能会动态变化,它们来自后端和键
解决方案
您可以使用keyvalue
管道。
<div *ngFor="let item of tdata | keyvalue">
{{ item.key }}
</div>
推荐阅读
- maven - 无法在安静模式下执行多个 pom.xml 文件
- java - 无法在 ubuntu 中设置类路径
- c# - 使用 C# 反序列化 JSON 时出错“A 对象不包含 B 的定义”
- java - Selenium 驱动程序无法加载某些页面的所有元素
- android - 在快速设置面板中禁用蓝牙磁贴
- javascript - undefined 不是一个对象(评估'Component.propTypes') - React Native 0.61.5
- python - 为什么我们不能在特征缩放中对依赖矩阵和独立矩阵使用单个对象?
- azure-data-factory - 多个触发并行的 Azure 数据工厂相同管道?
- php - 在 PHP 中过滤 woocommerce 产品问题
- javascript - angular指令如何同时操作多个dom?