Question

我尝试了以下2个选项，但都无法使用。

JSON

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

角度打字稿

选项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

我认为最好的选择是将属性映射到单个结构中，然后可以根据需要访问属性。

结果结构如下：

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

Answer 2

我创建了一个示例应用程序来动态绑定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>

首先，您需要创建一个columns数组并将其绑定到html中。

如果您有任何疑问，请告诉我。

如何访问对象数组中的不同属性-每个对象都有不同的键

2 个答案: