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

Question

所以我发现很难表达我的问题的标题，我想做的是循环遍历对象数组，但我不知道对象的属性，因为它是动态的并且来自数据库。下面是一个数组对象的例子：[{    "id": 9,    "event_id": 13,    "details": {        "firstname": "Ralph",        "lastname": "Marvin",        "email_address": "[e-mail]",        "phone_number": "0987654321"    }}, {    "id": 10,    "event_id": 13,    "details": {        "firstname": "John",        "lastname": "X Doe",        "email_address": "[e-mail]",        "phone_number": "0009876543"    }}, {    "id": 11,    "event_id": 13,    "details": {        "firstname": "Wari",        "lastname": "Gumah",        "email_address": "[e-mail]",        "phone_number": "120029182765"    }}]我想在如下所示的表格中显示对象的详细信息部分：firstname     lastname      email_address       phone_number以及每个值下的适当值。使用 Angular 8。我只是不知道如何使用 *ngFor 来访问我什至不知道的属性。我正在尝试做的甚至是可能的，如果是，请告诉我如何做。谢谢！。

Answer 1

您可以通过keyvalue pipe访问详细信息对象来迭代对象键/值作为内部 for 循环 。

网址：

  <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": "[e-mail]",

      "phone_number": "0987654321"

    }

    }, {

    "id": 10,

    "event_id": 13,

    "details": {

      "firstname": "John",

      "lastname": "X Doe",

      "email_address": "[e-mail]",

      "phone_number": "0009876543"

   }

   }, {

   "id": 11,

   "event_id": 13,

   "details": {

     "firstname": "Wari",

     "lastname": "Gumah",

     "email_address": "[e-mail]",

     "phone_number": "120029182765"

    }

   }]

Answer 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>