在数组数组中获取属性

问题描述

我有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>

请注意，这些列不能排序。 ngx-datatable上的sort方法意味着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,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属性进行排序。