Как создать таблицу данных с произвольными столбцами и данными? - PullRequest
Новая
       8

Как создать таблицу данных с произвольными столбцами и данными?

0 голосов
/ 27 октября 2018

У меня есть приложение, в котором пользователь может сделать выбор в раскрывающемся списке, который инициирует запрос, и результат - в данном случае таблица - отображается на веб-сайте. Данные всегда поступают в формате 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
            });

и в таблице показано 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>

Это, однако, всегда приводит к

ОШИБКА TypeError: «aoColumns [srcCol] не определена»

Как бы я сделал это правильно?

Полагаю, я не могу не просто использовать {{ response.columns }} и {{ response.data}}, но как-то нужно зацикливаться, но не уверен.

1 Ответ

0 голосов
/ 28 октября 2018

попробуйте отобразить данные в 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>
...