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

Question

我有一个应用程序，用户可以在下拉列表中进行选择，从而触发请求，并且输出(在本例中是一个表格)显示在网站上。数据始终采用 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
            });

该表显示在名为 a_nice_table 的 div 中。

我现在想在 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 子句现在仅用于演示目的；通常不需要这样做，响应将直接传递。

相应的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 文件 中显示数据:

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