Как использовать массивы json в Project Clarity DataGrid - PullRequest
Новая
       10

Как использовать массивы json в Project Clarity DataGrid

0 голосов
/ 09 октября 2018

Итак, у меня есть два набора данных массива, которые я хочу отобразить в Clarity Datagrid.

Вот мой html 

<div class="row">
  <div class="col-md-12">
    <div class="row">
      <div class="col-sm-12 text-right">
        <button class="btn btn-primary" (click)="openAddModal()">Take Action</button>
      </div>
    </div>
    <clr-datagrid>
      <clr-dg-column [clrDgSortBy]="'date'">Date Action Taken</clr-dg-column>
      <clr-dg-column [clrDgField]="'action'">Action Taken</clr-dg-column>
      <clr-dg-column [clrDgField]="'allegation'">Allegation Types</clr-dg-column>
      <clr-dg-column [clrDgField]="'resolution'">Resolution</clr-dg-column>

      <clr-dg-row *clrDgItems="let a of actions " [clrDgItem]="a">
        <clr-dg-cell>{{a.creatdDt}}</clr-dg-cell>
        <clr-dg-cell>{{a.actionType.actnTypeDesc}}</clr-dg-cell>
        <clr-dg-cell></clr-dg-cell>
        <clr-dg-cell></clr-dg-cell>
      </clr-dg-row>

      <clr-dg-footer>
        <clr-dg-pagination #pagination [clrDgPageSize]="10">
          {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
          of {{pagination.totalItems}} Notes
        </clr-dg-pagination>
      </clr-dg-footer>

    </clr-datagrid>

  </div>
</div>

Вот мои два набора массивов. Во-первых, это мой actions taken

[
  {
    "actnTknId": 480,
    "prvdrId": 5200833,
    "phrmcyId": null,
    "actnRsltnId": null,
    "actnTypeId": 2,
    "actnTknDt": "2015-05-06T00:00:00.000Z",
    "othrActionType": null,
    "userId": 420,
    "planSpnsrCntrctId": null,
    "creatdDt": "2018-10-04T19:50:35.000Z",
    "creatdBy": null,
    "lastUpdtdDt": null,
    "lastUpdtdBy": null,
    "actionType": {
      "actnTypeId": 2,
      "actnTypeDesc": "Termination",
      "actvSw": "1",
      "creatdDt": "2018-10-03T01:06:13.000Z",
      "creatdBy": null,
      "lastUpdtdDt": null,
      "lastUpdtdBy": null
    },
    "allegations": [
      {
        "algtnId": 122,
        "actnTknId": 480,
        "algtnTypeId": 10,
        "othrAlgtn": null,
        "creatdDt": "2018-10-03T01:08:12.000Z",
        "creatdBy": null,
        "lastUpdtdDt": null,
        "lastUpdtdBy": null
      }
    ]
  },
  {
    "actnTknId": 481,
    "prvdrId": 3192296,
    "phrmcyId": null,
    "actnRsltnId": null,
    "actnTypeId": 11,
    "actnTknDt": "2015-05-08T00:00:00.000Z",
    "othrActionType": null,
    "userId": 420,
    "planSpnsrCntrctId": null,
    "creatdDt": "2018-10-04T19:50:35.000Z",
    "creatdBy": null,
    "lastUpdtdDt": null,
    "lastUpdtdBy": null,
    "actionType": {
      "actnTypeId": 11,
      "actnTypeDesc": "Internal Data Analysis",
      "actvSw": "1",
      "creatdDt": "2018-10-03T01:06:13.000Z",
      "creatdBy": null,
      "lastUpdtdDt": null,
      "lastUpdtdBy": null
    },
    "allegations": [
      {
        "algtnId": 123,
        "actnTknId": 481,
        "algtnTypeId": 82,
        "othrAlgtn": null,
        "creatdDt": "2018-10-03T01:08:12.000Z",
        "creatdBy": null,
        "lastUpdtdDt": null,
        "lastUpdtdBy": null
      }
    ]
  }
]

Вот данные для моего примера обвинений 

[
  {
    "algtnTypeId": 1,
    "algtnTypeDesc": "Altered Prescription",
    "actvSw": "1",
    "creatdDt": "2018-10-03T01:07:09.000Z",
    "creatdBy": null,
    "lastUpdtdDt": null,
    "lastUpdtdBy": null
  },
  {
    "algtnTypeId": 2,
    "algtnTypeDesc": "Balance Billing",
    "actvSw": "1",
    "creatdDt": "2018-10-03T01:07:09.000Z",
    "creatdBy": null,
    "lastUpdtdDt": null,
    "lastUpdtdBy": null
  }
]

Итак, я хочу сделать

*clrDgItems="let al of allegations ", чтобы я мог поставить <clr-dg-cell>{{al.algtnTypeDesc}}</clr-dg-cell> в третьем столбце.

Как мне это сделать?

1 Ответ

0 голосов
/ 09 октября 2018

Вы можете сделать это: 

    let allegations = [];
    //Assuming you are already having data in 'actions' variable
    actions.forEach(a => { 
      // Adding null check
      if(a.allegations && a.allegations.length) {
         allegations = allegations.concat(a.allegations);
      }
    });

Таким образом, переменная 'allegations' будет содержать объединенный массив.

Счастливое кодирование !!

...