我在JSON下方,我要从中提取真正的Skills。

[
   {
      "_id":"5de9f351baca28556c6a4b71",
      "Name":"Harsha",
      "Age":20,
      "Gender":"M",
      "Skills":{
         "Java":"",
         "Mule":true,
         "Angular":""
      }
   },
   {
      "_id":"5de9f358baca28556c6a4b72",
      "Name":"Anji",
      "Age":21,
      "Gender":"M",
      "Skills":{
         "Java":"",
         "Mule":true,
         "Angular":true
      }
   },
   {
      "_id":"5dea110297c2b65298b136e4",
      "Name":"Abhi",
      "Age":25,
      "Gender":"M",
      "Skills":{
         "Java":"",
         "Mule":true,
         "Angular":""
      }
   }
]

我可以使用以下代码打印其余数据
<table *ngIf="formTemplate">
        <tr>
            <th *ngFor="let header of questionTitleArray" >{{header}}</th>
        </tr>

        <tr *ngFor="let data of surveyDataFromDB">
                <ng-container *ngFor="let head of questionTitleArray">
                <td>{{data[head]}}</td>
        </ng-container>
        </tr>
    </table>

(此处的JSON是“surveyDataFromDB”)

以下是我得到的输出
Name    Age Gender  Skills
Harsha  20  M   [object Object]
Anji    21  M   [object Object]
Abhi    25  M   [object Object]

我想要代替[object Object]的技能。请帮忙。

最佳答案

您可以首先将对象映射为仅包含真实对象。您可以使用lodash pickBy。

mappedSurveyDataFromDB = this.surveyDataFromDB.map(
    entry => ({...entry, Skills: _pickBy(entry.Skills, Boolean)}),
  );

像这样更改模板后:
<table>
  <tr>
    <th *ngFor="let header of questionTitleArray">{{ header }}</th>
  </tr>

  <tr *ngFor="let data of mappedSurveyDataFromDB">
    <ng-container *ngFor="let head of questionTitleArray">
      <td *ngIf="head !== 'Skills'">{{ data[head] }}</td>
      <td *ngIf="head === 'Skills'">
        <ng-container *ngFor="let entry of (data[head] | keyvalue); let last = last">
          {{ entry.key }}
          <ng-container *ngIf="!last">, </ng-container>
        </ng-container>
      </td>
    </ng-container>
  </tr>
</table>

Stackblitz:https://stackblitz.com/edit/angular-ga7lqg

10-05 21:03
查看更多