如何创建具有任意列和数据的数据表？

Question

我有一个应用程序，用户可以在该应用程序中的下拉菜单中进行选择，这会触发请求并在网站上显示输出（在本例中为 table）。数据总是以 JSON 格式出现，如下所示：

'{"columns":["C1","C2"], "data":[[8,98],[22,95],[43,29],[79,29]]}';
'{"columns":["foo","bar","xyz"], "data":[[27,26,3],[54,80,93],[92,10,90]]}';

在jQuery的世界里，我总是可以做这样的事情：

table = $("#a_nice_table").DataTable({
              data: response.data,
              columns: response.columns
            });

并且 table 在 div 中显示为 a_nice_table。

我现在想在 Angular 中做同样的事情，但受限于网站的人数。

我有一个这样的组件 dt-dropdown.component：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-dt-dropdown',
  templateUrl: './dt-dropdown.component.html',
  styleUrls: ['./dt-dropdown.component.css']
})
export class DtDropdownComponent implements OnInit {

  ddSelector: string = "";
  response: any;
  tableJSON1: string = '{"columns":["C1","C2"], "data":[[8,98],[22,95],[43,29],[79,29]]}';
  tableJSON2: string = '{"columns":["foo","bar","xyz"], "data":[[27,26,3],[54,80,93],[92,10,90]]}';

  constructor(private http: HttpClient) { }

  ngOnInit() { }

  getTable() {
    this.http.get('https://api.github.com/users/alan-agius4') // + this.ddSelector
    .subscribe((response) => {

      // usually without the if-clause
      if (this.ddSelector === 'type1') {
        this.response = JSON.parse(this.tableJSON1);
      } else {
        this.response = JSON.parse(this.tableJSON2);
      }
      // this.response = response;
      console.log(response);
      console.log(JSON.parse(this.tableJSON1));
    });
  }
}

if 子句现在仅用于演示目的；通常这是不需要的， response 会被直接传递。

对应的HTML是这样的：

Choose something: 
<select [(ngModel)]="ddSelector">
    <option>type1</option>
    <option>type2</option>
</select>
<button (click)="getTable()">Get table!</button>
<div *ngIf="response">
    <table datatable class="row-border hover">
        <thead>
            {{ response.columns }}
        </thead>
        <tbody>
            {{ response.data}}
        </tbody>
    </table>
</div>

然而，这总是导致

ERROR TypeError: "aoColumns[srcCol] is undefined"

我该如何正确执行此操作？

我想我不能只使用 {{ response.columns }} 和 {{ response.data}} 但不知何故需要循环，但不确定。

Answer 1

尝试以这种方式显示 HTML file 中的数据：

<table datatable class="row-border hover">
    <thead>
       <tr>
        <th *ngFor="let column of response.columns">
          {{ column }}
        </th>
       </tr>
    </thead>
    <tbody>
     <tr *ngFor="let row of response.data">
       <td *ngFor="let cell of row">{{cell}}</td>
     </tr>
    </tbody>
</table>

如何创建具有任意列和数据的数据表？

How to create a datatable with arbitrary columns and data?

angular-datatables

angular

angular-httpclient