时间戳

首页 > 解决方案 > 在数组数组中获取属性

arrays - 在数组数组中获取属性

问题描述

我有接收数组数组的 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]，这是属性所在的位置。有人可以告诉我该怎么做吗？

标签： arraysangularngx-datatable

解决方案

您基本上有一个数组数组，并且数组中的每个项目的长度肯定为 1，对吗？因此，在单元格模板中，您的行基本上是一个数组，而不是一个对象，您需要访问row[0].valueMasteror 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,
        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属性排序。

推荐阅读