如何在Angular中循环遍历未知属性的数组对象答案

【问题标题】：How To Loop Through An Array Object Of Unknown Properties In Angular如何在Angular中循环遍历未知属性的数组对象
【发布时间】：2019-09-12 12:02:36
【问题描述】：

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

以下是数组对象的示例：

[{
    "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

以及每个值下的相应值。使用 Angular 8。

我只是不知道如何使用 *ngFor 来访问我什至不知道的属性。我正在尝试做的事情是否可能，如果是，请告诉我如何做。

谢谢！

【问题讨论】：

标签： javascript arrays json angular

【解决方案1】：

您可以使用keyvalue pipe 访问详细信息对象，将对象键/值作为内部 for 循环进行迭代。

HTML：

  <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"
    }
   }]

【讨论】：

【解决方案2】：

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

@Input() items: Item[];
fields: Set<string>;
ngOnChanges(changes) {
  if(!changes.items || !this.items) return;
  this.fields= new Set(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>

【讨论】：