Как динамически отображать столбцы сетки с данными в angular 7 - PullRequest
Новая
       40

Как динамически отображать столбцы сетки с данными в angular 7

0 голосов
/ 27 апреля 2020

Я хочу показать сетку API данных массива. например, данные ниже: 1001 * 

  UserReports": [
    {
      "CustomerName": "bindu",
      "Quantity": "846",
      "Weight": "1999.9700",
      "TotalOrders": "36"
    },
    {
      "CustomerName": "useruser",
      "Quantity": "24",
      "Weight": "64.0000",
      "TotalOrders": "2"
    },
    {
      "CustomerName": "hima123",
      "Quantity": "12",
      "Weight": "54.2300",
      "TotalOrders": "1"
    },
    {
      "CustomerName": "bindu1 bindu2",
      "Quantity": "78",
      "Weight": "311.1500",
      "TotalOrders": "6"
    },
]

в столбцах массива увеличиваются или уменьшаются. Я хочу показать в этой сетке 4 столбца, как имя клиента, количество, вес, общее количество заказов с соответствующими данными, как показано ниже. Я не мог найти решение для этого. я пробовал ниже 

  private populateCustomerInfoList(UserReports: any): any {
    UserReports.forEach(function(item) {
            Object.keys(item).forEach(function(key) {
                const orders = {
                       key: key,
                       value: item[key]
                };
                orderList.push(orders);                                
            });
          });
          return orderList;
}

но слышал получение повторяющихся / дублирующих данных, поэтому не могли бы вы предложить мне, как назначить столбцы для данных массива столбцов сетки соответственно

ожидая, что данные сетки данных

ex: 

 CustomerName Quantity Weight      TotalOrders
    bindu         846    1999.9700     36
    useruser      24     64.0000       2
    hima123       12     54.2300       1
    bindu1 bindu2 78     311.1500      6

Ngx DataDatable: 

 <ngx-datatable class="bootstrap" [rows]="userInfoList"
   [headerHeight]="50" [footerHeight]="50" [rowHeight]="'45'"
   [scrollbarH]="true" [columnMode]="'force'" [limit]="limit"
     [sorts]="[{prop: 'sNo', dir: 'asc'}]">
   <ngx-datatable-column *ngFor="let column of displayColumns"
     [name]="column.name">
     <ng-template let-column="column" ngx-datatable-header-template>
       <span>{{column.name}}</span>
        </ng-template>
        <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex"
         let-value="value" let-row="row">
         <span  *ngIf="column.name !== 'Actions'">{{row[column.value]}} 
        </span>
    </ng-template>
    </ngx-datatable-column>
    </ngx-datatable>

ожидаемое назначение для столбцов сетки 

 this.displayColumns = orderList.key;
this. UserInfolist = orderList ;

Пожалуйста, предложите мне, как выйти из него, пожалуйста?

...