Angular - 如何显示或循环数组数组

Question

我想显示其中包含数组的数组列表。

我有如下带有虚拟数据的数组

[
    [
        {
            "date": "September 11",
            "User": "ABC",
            "Action": "Added"
            
        },
        {
            "date": "September 11",
            "User": "asd",
            "Action": "Removed"
            
        }
    ],
    [
        {
            "date": "September 8",
            "User": "sdf",
            "Action": "Added"
            
        },
        {
            "date": "September 8",
            "User": "rty",
            "Action": "Updated"
           
        },
        {
            "date": "September 8",
            "User": "pol",
            "Action": "Removed"           
        }
    ]
]

我正在尝试根据日期在 html 页面中使用角垫表获取如下数据

9 月 11 日

• 添加ABC

• asd 已删除

9 月 8 日

• sdf 添加

• 已更新

• pol 已删除

Answer 1

您可以迭代列表中的每个项目（因此同一日期的每个事件）。然后，一旦进入，您就可以再次循环浏览该日期的每个事件。

基本上，你只需要两个循环。

这是一个在 javascript 中使用 console.log() 的示例，其中包含您提供的数据：

let i = 0;
let j = 0;
let date = "";

for (i = 0; i<array.length; i++){
    for (j=0; j < array[i].length; j++){
        if (date == ""){
           date = array[i][j]['date'];
           console.log(array[i][j]['date']);
        }
        console.log(array[i][j]['User'] + " " + array[i][j]['Action']);
    }
date = "";
}

结果：

干杯！

Answer 2

你可以尝试这样的事情：

<div *ngFor="let dataArray of data">
  <div *ngIf="dataArray.length > 0">
    <h2>{{ dataArray[0].date }}</h2>
    <table>
      <tr *ngFor="let item of dataArray">
        <td>{{ item.User }}</td>
        <td>{{ item.Action }}</td>
      </tr>
    </table>
  </div>
</div>