Как получить доступ к различным свойствам в массиве объектов - каждый объект имеет разные ключи

Question

Я испробовал следующие 2 варианта, но оба не работают.

JSON

{
   "Properties": [
                {
                    "Type": "LEI"
                },
                {
                    "Country": "DE"
                },
                {
                    "Name": "Credit Institution"
                }
            ]
}

Angular Typescript

Опция # 1

<ng-template pTemplate="body" let-entity>
  <tr>
    <td>{{entity.Properties[Type]}}</td>
    <td>{{entity.Properties[Country]}}</td>
    <td>{{entity.Properties[Name]}}</td>
  </tr>
 </ng-template>

Опция # 2

<ng-template pTemplate="body" let-entity>
  <tr>
    <td>{{entity.Properties.Type}}</td>
    <td>{{entity.Properties.Country}}</td>
    <td>{{entity.Properties.Name}}</td>
  </tr>
 </ng-template>

Обновление: -

Мой настоящий JSON

    {
    "_id": "5bcb2dbfe8ffdd1bd0913825",
    "_entitykey": "CRD_CRE_INS.CRDINSLEICODE",
    "_validfrom": "2018-10-20T13:31:35.040Z",
    "_validto": "2100-12-31T00:00:00.000Z",
    "_datahash": "84f28a3fed7d3a1e5e2b21e5bc91e8a1",
    "_payload": {
        "CA_OwnerID": "EU_ECB",
        "EntityCode": "CRDINSLEICODE",
        "EntityType": "CRD_CRE_INS",
        "Properties": [{
                "EEA_DEP_GUA_SCH": [
                    "IS_TIF",
                    "GB_FSCS"
                ]
            },
            {
                "ENT_AU": [
                    "2017-09-05",
                    "2018-10-05",
                    "2019-01-01"
                ]
            },
            {
                "ENT_COD_TYP": "LEI"
            },
            {
                "ENT_COU_RES": "DE"
            },
            {
                "ENT_NAM": "Credit Institution In Germany"
            },
            {
                "ENT_NAT_REF_COD": "REFCODE12342"
            },
            {
                "ENT_TOW_CIT_RES": "GERMAN TOWN1243"
            },
            {
                "INT_CAP_REQ_UND_ART_12": "ART_12_1_CRD"
            },
            {
                "TYP_UND_ACC_CRR_ART_27": "ART_27_1_A1_CRR"
            },
            {
                "IS_HID_NOT_PUB": "0"
            }
        ],
        "Services": [{
                "DE": [
                    "PS_010",
                    "PS_020",
                    "PS_03A",
                    "PS_03B"
                ]
            },
            {
                "GR": [
                    "PS_010",
                    "PS_020"
                ]
            }
        ]
    }
}

Answer 1

Я создал пример приложения для динамического связывания свойства на stackblitz

Вот код компонента.

data = {
   "Properties": [
                {
                    "Type": "LEI"
                },
                {
                    "Country": "DE"
                },
                {
                    "Name": "Credit Institution"
                }
            ]
}

columns:string[] = [];
ngOnInit(){
  for(let row of this.data.Properties){
    for(var columnName in row){
      this.columns.push(columnName)
    }
  }
}

Вот код HTML.

<table>
  <tr *ngFor="let row of data.Properties; let i = index">
    <td >{{row[columns[i]]}}</td>
  </tr>
</table>

Сначала вам нужно создать массив столбцов и связать его в html.

Пожалуйста, дайте мне знать, если у вас есть какие-либо вопросы.

Answer 2

Я думаю, что вам лучше всего сопоставить свойства в единую структуру, и тогда вы сможете получить доступ к свойствам по своему усмотрению.

Полученная структура будет выглядеть следующим образом:

{
  "Type": "LEI",
  "Country": "DE",
  "Name": "Credit Institution"
}

Таким образом, вы будете обращаться к одному объекту, а не к массиву объектов с разными свойствами, например:

var entity = {
   "Properties": ([
      {
          "Type": "LEI"
      },
      {
          "Country": "DE"
      },
      {
          "Name": "Credit Institution"
      }
  ]).reduce((res, curr) => Object.assign(res, curr), {})
}

console.log(entity.Properties)

<ng-template pTemplate="body" let-entity>
  <tr>
    <td>{{entity.Properties.Type}}</td>
    <td>{{entity.Properties.Country}}</td>
    <td>{{entity.Properties.Name}}</td>
  </tr>
</ng-template>

Или, если вы хотите показать все свойства, вы можете сделать это динамически, например:

<ng-template pTemplate="body" let-entity>
  <tr>
    <td *ngFor="let key of entity.Properties">{{entity.Properties[key]}}</td>
  </tr>
</ng-template>