Используя табулятор в Angular 8, все данные и заголовки отображаются в первом столбце - PullRequest
Новая
       14

Используя табулятор в Angular 8, все данные и заголовки отображаются в первом столбце

1 голос
/ 26 мая 2020

В Angular 8 я настроил компонент таблицы табуляторов (Tabulator), и я пытаюсь отправить данные из app.component в таблицу tabulator. Я передаю данные между двумя компонентами с помощью общей службы. Данные передаются успешно, однако, когда я пытаюсь выполнить команду drawTable (), у меня возникает проблема, когда все заголовки и данные строк отображаются в первом столбце сетки табулятора. Я работал над этим в течение последних полутора дней, поэтому я буду очень благодарен за любую помощь.

data-table.service.ts `

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class DataTableService {

  arrayData:any[];
  columnData:any[];

  constructor() { }
}

`

appComponent. html

`
<app-tabulator-table></app-tabulator-table>
`

appComponent.ts 

`
import { Component, OnInit } from '@angular/core';
import { DataTableService } from './services/data-table.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'StoresAppUI';

  myTableData: any[] = this.getData()
  myColumnNames: any[] = this.getColumns();
  height: string = '311px';

  get arrayData():any[] {
    return this.dataService.arrayData;
  }

  set arrayData(value : any[]) {
    this.dataService.arrayData = value;
  }

  get columnData():any[] {
    return this.dataService.columnData;
  }

  set columnData(value: any[]) {
    this.dataService.columnData = value;
  }

  constructor(private dataService: DataTableService) {}

  ngOnInit()
  {
    this.dataService.arrayData = this.getData();
    console.log('myTableData => ', this.dataService.arrayData);

    this.dataService.columnData = this.getColumns();
    console.log('myColumnNames = ', this.dataService.columnData);
  }


  getData(): any[]
  {
    let data:any[] = [
      {firstname: "Al", lastname:"Alberts", age:66},
      {firstname: "Bob", lastname:"Banes", age:66},
      {firstname: "Chuck", lastname:"Chandler", age:55},
      {firstname: "Donnie", lastname:"Darwin", age:77},
    ]
    return  data;
  }

  getColumns():any[]
  {
    let cols: any[] = [
      {title: 'First', field:'firstname', width:100},
      {title: 'Last', field: 'lastname', width:100},
      {title: 'Age', field: 'age', width:100}
    ];
    return cols;
  }
}
`

таблица-табулятор .component. html

`
<div id="my-tabular-table"></div>
`

tabulator-table.component.ts 

`
import { Component, Input, OnChanges, SimpleChanges, OnInit } from "@angular/core";
import Tabulator from "tabulator-tables";
import { DataTableService } from "../../services/data-table.service";

/**
 * This is a wrapper class for the tabulator JS library.
 * For more info see http://tabulator.info
 */
@Component({
  selector: "app-tabulator-table",
  templateUrl: "./tabulator-table.component.html",
  styleUrls: ["./tabulator-table.component.css"],
})
export class TabulatorTableComponent implements OnChanges, OnInit {
  @Input() tableData: any[];
  @Input() columns: any[];
  @Input() height: string = "311px";

  get arrayData(): any[] {
    return this.dataService.arrayData;
  }

  get columnData(): any[] {
    return this.dataService.columnData;
  }

  tab = document.createElement("div");

  constructor(private dataService: DataTableService) {}

  ngOnInit() {
    this.tableData = this.dataService.arrayData;
    console.log("tableData (in table) => ", this.tableData);

    this.columns = this.dataService.columnData;
    console.log("columns (in table) => ", this.columns);

    this.drawTable();
  }

  ngOnChanges(changes: SimpleChanges): void {
    this.drawTable();
  }

  private drawTable(): void {
    new Tabulator(this.tab, {
      data: this.tableData,
      reactiveData: true, //enable data reactivity
      columns: this.columns,
      layout: "fitColumns",
      width: "600px",
      height: "311px",
    });
    document.getElementById("my-tabular-table").appendChild(this.tab);
  }
}
`

Вот результаты после отображения столбцов и передаваемых данных в функцию drawTable () по запросу Mar c.

columns
[{"title": "First", "field": "firstname", "width": 100}, {"title": "Last", "field": "lastname", "width": 100}, {"title": "Age", "field": "age", "width": 100} ] data [{"firstname": "Al", "lastname": "Alberts", "age": 66}, {"firstname": "Bob", "lastname": "Banes", "age": 66} , {"firstname": "Chuck", "lastname": "Chandler", "age": 55}, {"firstname": "Donn ie", "lastname": "Dreary", "age": 77 }]

После следующего крыл сообщение Оли, я понял, что мне нужно переместить табулятор. css код в стили. css в root проекта. После этого все данные отображаются в таблице правильно.

Всем спасибо за быстрые ответы.

...