Javascript 如何循环遍历角度方向上属性未知的数组对象

所以我发现我的问题的标题很难措辞，我想做的是循环和对象数组，但我不知道对象的属性，因为它是动态的，并且来自数据库

下面是数组对象的示例：

[{
    "id": 9,
    "event_id": 13,
    "details": {
        "firstname": "Ralph",
        "lastname": "Marvin",
        "email_address": "ralphmarvin@email.com",
        "phone_number": "0987654321"
    }
}, {
    "id": 10,
    "event_id": 13,
    "details": {
        "firstname": "John",
        "lastname": "X Doe",
        "email_address": "john_x_doe120@xmail.com",
        "phone_number": "0009876543"
    }
}, {
    "id": 11,
    "event_id": 13,
    "details": {
        "firstname": "Wari",
        "lastname": "Gumah",
        "email_address": "gumahwarihanna@eeee.com",
        "phone_number": "120029182765"
    }
}]

我想在如下表中显示对象的详细信息部分：

firstname     lastname      email_address       phone_number

以及每个值下的相应值。 一个使用角度8

我只是不知道如何使用*ngFor访问我甚至不知道的属性。 是什么我试图做甚至可能，如果是的话，请告诉我如何

---

谢谢

您可以在组件上实现一些逻辑来获得一组字段。它在某种程度上看起来是这样的：（我假设项目以@Input（）的形式出现在组件中，但它可能是另一个源）

@Input（）项：项[]；
字段：集合；
ngOnChanges（更改）{
如果（！changes.items | |！this.items）返回；
this.fields=新集合（this.items.flatMap（item=>Object.keys（item.details）））
}

然后在模板中

<tr *ngFor="let item of items">
   <td *ngFor="let field of fields">{{item.details[field]}}</td>
</tr>

{{item.details[field]}

您可以使用

keyvalue管道

访问对象详细信息，将对象键/值作为内部for循环进行迭代

Html:

<tr *ngFor="let item of items">
   <td *ngFor="let field of fields">{{item.details[field]}}</td>
</tr>

  <table>
     <tr>              
       <th>Firstname</th>
       <th>lastname</th>
       <th>email_address</th>
       <th>phone_number</th>
     </tr>
     <tr *ngFor="let listItem of yourList" >
       <td *ngFor="let innerItem of listItem.details | keyvalue"> 
         {{innerItem.value}
       </td>
     </tr>
   </table>

   yourList = [{
    "id": 9,
    "event_id": 13,
    "details": {
      "firstname": "Ralph",
      "lastname": "Marvin",
      "email_address": "ralphmarvin@email.com",
      "phone_number": "0987654321"
    }
    }, {
    "id": 10,
    "event_id": 13,
    "details": {
      "firstname": "John",
      "lastname": "X Doe",
      "email_address": "john_x_doe120@xmail.com",
      "phone_number": "0009876543"
   }
   }, {
   "id": 11,
   "event_id": 13,
   "details": {
     "firstname": "Wari",
     "lastname": "Gumah",
     "email_address": "gumahwarihanna@eeee.com",
     "phone_number": "120029182765"
    }
   }]