用JavaScript创建一个双精度数组并填充它

Question

我想导出ngx-datatable，如果可能的话，我已经在网上看到了，但是显然，使用ngx-datatable，不可能用简单的功能来实现。因此，我尝试创建自己的可点击按钮，以提取数组中的数据。

我网站上的数组是这样的：

https://image.noelshack.com/fichiers/2019/45/3/1573045388-stackover.png

我想以相同的“外观”将此数组导出到xlsx文件中。

所以要在我的网站中用价值股票填充双精度数组（这不是我的代码，我只是初创公司的实习生，所以解释起来很复杂。）该值是连续的股票，具有例如该人，我必须使用row.first_name，例如下面的示例。

this.rows.forEach(element => {
  TableData.push([element.first_name + ' ' + element.last_name], [element.status], [element.address_from_locality], [element.address_to_locality]);
  i++;
});

我也尝试这种方式

var TableData = [];
      this.rows.forEach(element => {
        TableData.push(element.first_name + ' ' + element.last_name);
        TableData.push(element.status);
        TableData.push(element.address_from_locality);
        TableData.push(element.address_to_locality);
      });

但是这些方式不起作用，它们只给我一个简单的数组，但是我需要这种方式：

https://image.noelshack.com/fichiers/2019/45/3/1573045738-stockarray.png

最后，我想用xlsx在xlsx文件中导出此双精度数组，并使用以下代码：

const wb = xlsx.utils.book_new(), ws = xlsx.utils.aoa_to_sheet(TableData);
    xlsx.utils.book_append_sheet(wb, ws);
    xlsx.writeFile(wb, filename);

您能帮我找到解决方法吗？

感谢您的帮助。

Answer 1

我在前面这样使用它

<ngx-datatable #myTable class="material" [columnMode]="'force'" [rows]="rows" [rowHeight]="'auto'"
      [headerHeight]="'auto'" [footerHeight]="'auto'" [externalPaging]="true" [count]="paginationInfo.totalElements"
      [offset]="paginationInfo.currentPage" [limit]="paginationInfo.pageSize" [scrollbarH]="true"
      [loadingIndicator]="loadingIndicator" (sort)="onSort($event)" (page)="setTablePage($event)" id="exportable">
      <ngx-datatable-column name="Name" [sortable]="true" [width]="200" [prop]="'first_name'" frozenLeft="true">
        <ng-template let-row="row" ngx-datatable-cell-template>
          <a [routerLink]="['/',auth.userRID,'talent',row.user_id]">
            {{row?.first_name}}
            {{row?.last_name}}
          </a>
        </ng-template>
      </ngx-datatable-column>
      <ngx-datatable-column name="Status" [prop]="'status'" [width]="200">
        <ng-template let-row="row" ngx-datatable-cell-template>
          <span class="label" labelState [setType]="'talent'" [labelStatus]="row.status">
            {{ row?.status.replace("_"," ") }}
          </span>
        </ng-template>
      </ngx-datatable-column>
      <ngx-datatable-column name="From" [sortable]="true" [prop]="'address_from_locality'" [width]="200">
        <ng-template let-row="row" ngx-datatable-cell-template>
          {{ row?.address_from_locality }}
        </ng-template>
      </ngx-datatable-column>
      <ngx-datatable-column name="To" [sortable]="true" [prop]="'address_to_locality'" [width]="200">
        <ng-template let-row="row" ngx-datatable-cell-template>
          {{ row?.address_to_locality }}
        </ng-template>
      </ngx-datatable-column>
      <ngx-datatable-column name="Actions" [sortable]="false" [width]="200">
        <ng-template let-row="row" ngx-datatable-cell-template>
          <div class="btn-group" dropdown container="body">
            <button class="btn btn-info btn-xs dropdown-toggle" dropdownToggle type="button">
              More <span class="caret"></span>
            </button>
            <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu" role="menu" aria-labelledby="button-basic">
              <li role="menuitem"><a class="dropdown-item" [routerLink]="['/call',row.user_id]">Chat</a></li>
              <li role="menuitem"><a class="dropdown-item" [routerLink]="['/',auth.userRID,'talent',row.user_id]">View
                  profile</a></li>
              <li role="menuitem"><a class="dropdown-item"
                    [routerLink]="['/',auth.userRID, 'talent','tasks',row.user_id]">View Tasks</a></li>
              <li role="menuitem"><a class="dropdown-item"
                  [routerLink]="['/',auth.userRID,'talent','edit',row.user_id]">Edit profile</a></li>
              <li role="menuitem" dropdown triggers="mouseover"><a dropdownToggle
                  class="dropdown-item dropdown-toggle">Change
                  status to<span class="caret"></span></a>
                <ul *dropdownMenu class="dropdown-menu" role="menu">
                  <li role="menuitem" *ngFor="let status of statuses|keyvalue">
                    <a class="dropdown-item" (click)="switchStatus(row.user_id,status.value)">{{status.key}}</a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </ng-template>
      </ngx-datatable-column>
      <!--<ngx-datatable-column name="Start Date" [sortable]="true" [prop]="'move_date'">
        <ng-template let-row="row" ngx-datatable-cell-template>
          {{ row?.move_date | date }}
        </ng-template>
      </ngx-datatable-column>
      <ngx-datatable-column name="End Date" [sortable]="true" [prop]="'end_date'">
        <ng-template let-row="row" ngx-datatable-cell-template>
          {{ row?.end_date | date }}
        </ng-template>
      </ngx-datatable-column>
      <ngx-datatable-column name="Email" [sortable]="true" [prop]="'user_email'">
        <ng-template let-row="row" ngx-datatable-cell-template>
          {{ row?.email }}
        </ng-template>
      </ngx-datatable-column>
      <ngx-datatable-column name="Onboard Date" [sortable]="true" [prop]="'created_at'">
        <ng-template let-row="row" ngx-datatable-cell-template>
          {{ row?.created_at | date }}
        </ng-template>
      </ngx-datatable-column>-->
    </ngx-datatable>

而且我想将所有这些行值导出到xlsx文件中

Answer 2

如果我对您的理解正确，这应该对您有用：

let resultArray = this.rows.map( {first_name, last_name, status, address_from_locality, address_to_locality} => 
([first_name, last_name, status, address_from_locality, address_to_locality]) );

如果您需要第一个内部数组包含实际的文件名（我的意思是["first_name", "last_name", "status", "address_from", "address_to"]，请在下面添加此行：

resultArray.unshift(Object.keys(this.rows[0]));->这会将element对象的键添加到数组的第一位。

编辑：另外，因为您是初学者，所以我在这里添加了一些资源，以便您更好地了解自己的工作：

array and object destructuring

Array.map() method

Array.unshift() method

Object.keys() method