如何在* ngfor中显示数组对象的数组[重复]

Posted 2023-03-13

【中文标题】如何在* ngfor中显示数组对象的数组[重复]

【英文标题】：How to to display array of objects of array in *ngfor [duplicate]

【发布时间】：2021-03-10 20:36:15

【问题描述】：

我有一个这样的数组

 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 中的值可能会动态变化，它们来自后端和键

【参考方案1】：

先获取数组的长度。然后遍历 Object.keys 以获取每个键的值以获取新行。

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]
;

let tdataFormatted = [];
let rowLength = Object.keys(tdata)[0].length; //get the length of the first property.

let i = 0;
while (i < rowLength) 

    let newObj = ;

    for (key in tdata) 
        newObj[key] = tdata[key][i];
    

    tdataFormatted.push(newObj)

    i++;


console.log(tdataFormatted);

【参考方案2】：

您可以使用keyvalue 管道。

<div *ngFor="let item of tdata | keyvalue">
   item.key 
</div>

【讨论】：

是的，我尝试使用 Object.Keys。