Angular Tabulator 表日期未显示

Question

我在 Angular 组件中渲染制表符表时遇到问题。我已在 TypeScript 文件 (test.component.ts) 中定义了数据 (tableData) 和列 (tableColumns)，并尝试在 ngAfterViewInit 生命周期挂钩中初始化 Tabulator 实例。但是，该表未按预期呈现。我已经检查了控制台中的错误，但没有明显的问题。

我将不胜感激有关可能导致问题的原因的任何指导或有关如何排除故障和解决问题的建议。（我想显示测试文件中的表测试文件是 http://localhost:4200/pages/ 形式的子部分表格/测试）

预先感谢您的帮助！

这是代码的简化版本：

import { Component, AfterViewInit } from '@angular/core';
import 'tabulator-tables';

declare var Tabulator: any;

@Component({
  selector: 'ngx-test',
  styleUrls: ['./test.component.scss'],
  templateUrl: './test.component.html',
})
export class TestComponent implements AfterViewInit {
  exTable: any;
  // Removed the initialization of tableData and tableColumns here

  ngAfterViewInit() {
    this.exTable = new Tabulator('#ex-table-div', {
      height: 130,
      layout: 'fitColumns',
      movableColumns: true,
      // Data and columns will be passed via Angular property binding
    });
  }
}

和test.component.html代码是

<h1>Test Page</h1>
<div id="ex-table-div"></div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const tableData = [
      {
        id: '1',
        firstName: 'John',
        lastName: 'Smith',
        state: 'Ohio',
      },
      {
        id: '2',
        firstName: 'Jane',
        lastName: 'Doe',
        state: 'Iowa',
      },
      {
        id: '3',
        firstName: 'Bill',
        lastName: 'Great',
        state: 'Hawaii',
      },
      {
        id: '4',
        firstName: 'Ted',
        lastName: 'Adventure',
        state: 'Arizona',
      },
    ];

    const tableColumns = [
      { title: 'Id', field: 'id' },
      { title: 'First Name', field: 'firstName' },
      { title: 'Last Name', field: 'lastName' },
      { title: 'Location', field: 'state' },
    ];

    const exTable = new Tabulator('#ex-table-div', {
      height: 130,
      layout: 'fitColumns',
      movableColumns: true,
      data: tableData,
      columns: tableColumns,
    });
  });
</script>

Answer 1

您需要在

"noImplicitAny": false

中设置

tsconfig.json

。

你还需要安装两个东西

npm i tabulator-tables --save
npm i @types/tabulator-tables --save-dev

之后您可以导入制表符，如下例所示，如果有任何疑问，请告诉我。

ts

import {
  Component,
  Input,
  OnChanges,
  SimpleChanges,
  ViewChild,
  ElementRef,
} from '@angular/core';
import Tabulator from 'tabulator-tables';

@Component({
  selector: 'app-tabulator',
  templateUrl: './tabulator.component.html',
  styleUrls: ['./tabulator.component.css'],
  standalone: true,
})
export class TabulatorComponent {
  @ViewChild('tabulator') tabulator!: ElementRef<HTMLElement>;
  @Input() tableData: any[] = [];
  @Input() columnNames: any[] = [];
  @Input() height: string = '311px';
  // list properties you want to set per implementation here...

  tab = document.createElement('div');

  constructor() {}

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

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

  private drawTable(): void {
    if (this.tabulator.nativeElement) {
      new (Tabulator as any)(this.tabulator.nativeElement, {
        data: this.tableData,
        columns: this.columnNames,
        height: 130,
        layout: 'fitColumns',
        movableColumns: true,
      });
    }
  }
}

html

<div #tabulator></div>

堆栈闪电战