Блог

У меня есть ngx-datatable, которые получают массив массивов следующим образом:

 {0: Array(1)
 0:
   alert: null
   areEquals: true
   key: "Payment Date"
   order: 0
   readOnly: false
   subCollection: null
   valueMaster: "06/11/2020 00:00:00"
   valueSlave: "06/11/2020 00:00:00"
   __proto__: Object
   length: 1
   __proto__: Array(0)},
  { 1: Array(1)
    0:
      alert: null
      areEquals: true
      key: "Payment Date"
      order: 0
      readOnly: false
      subCollection: null
      valueMaster: "08/02/2021 00:00:00"
      valueSlave: "08/02/2021 00:00:00"
      __proto__: Object
      length: 1
      __proto__: Array(0)
    }
  

Я пытаюсь создать таблицу, используя свойства valueMaster и valueSlave, которые находятся внутри массива 0, который присутствует во всех массивах. Что я делаю до сих пор:

 <ngx-datatable
              class='table mt-0 table-hover table-stripped' 
              [rows]="paymentFlow" 
              [messages]="''" 
              [columnMode]="'force'" 
              [sorts]="[{prop: propSort, dir: 'asc'}]" 
              [rowHeight]="getRowHeight">
              
              <ngx-datatable-column name="Base Gai" prop="valueMaster">              
                <ng-template let-value="value" ngx-datatable-cell-template>
                  {{value}}         
                </ng-template>
              </ngx-datatable-column>

              <ngx-datatable-column name="Cln" prop="valueSlave">
                <ng-template let-value="value">
                  {{value}}          
                </ng-template>
              </ngx-datatable-column>
              </ngx-datatable>
  

Однако таблица возвращает пустую, я полагаю, почему я должен выполнить предыдущую итерацию, чтобы получить именно [0], где находятся свойства. Может кто-нибудь сказать мне, как это сделать?

По сути, у вас есть массив массивов, и каждый элемент в массиве наверняка имеет длину 1, правильно? Итак, в шаблонах ячеек ваша строка в основном является массивом, а не объектом, и вам нужно получить доступ к row[0].valueMaster или row[0].valueSlave , в зависимости от столбца.

Вы можете сделать это, определив шаблоны следующим образом:

 <ngx-datatable-column name="Value master">
    <ng-template let-row="row" ngx-datatable-cell-template>
        {{row[0].valueMaster}}
    </ng-template>
</ngx-datatable-column>

<ngx-datatable-column name="Value slave">
    <ng-template let-row="row" ngx-datatable-cell-template>
        {{row[0].valueSlave}}
    </ng-template>
</ngx-datatable-column>
  

Имейте в виду, что эти столбцы не могут быть отсортированы. Метод sort в ngx-datatable подразумевает, что prop должен быть прямым свойством объекта, поэтому тот факт, что вы получаете доступ к свойствам в массиве, не позволит вам выполнить сортировку.

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

Предполагая, что результат вашего запроса GET равен:

   data = [
    [
      {
        alert: null,
        areEquals: true,
        key: "Payment Date",
        order: 0,
        readOnly: false,
        subCollection: null,
        valueMaster: "06/11/2020 00:00:00",
        valueSlave: "06/11/2020 00:00:00"
      }
    ],
    [
      {
        alert: null,
        areEquals: true,
        key: "Payment Date",
        order: 0,
        readOnly: false,
        subCollection: null,
        valueMaster: "08/02/2021 00:00:00",
        valueSlave: "08/02/2021 00:00:00"
      }
    ]
  ];
  

Создайте свой rows массив следующим образом: this.rows = this.data.map(item => item[0]); и используйте предоставленные вами шаблоны, которые будут поддерживать сортировку по valueMaster и valueSlave свойствам.