Question

我有一个要与服务一起使用的Angular Datatable。我有一个服务的测试版本（模拟），其中包含我想显示的信息数组。

此外，我希望能够通过单击来选择特定行中的数据。点击一行后，我需要能够处理所选数据。

我的服务代码非常简单：

import { Injectable } from '@angular/core';

export class PersonInfo {
  constructor(
    public id: number,
    public firstname: string,
    public middle: string,
    public lastname: string,
}

const thePeople = [
  {
    id: 1,
    firstname: 'John',
    middle: 'H',
    lastname: 'Doe',
  }
];

@Injectable({
  providedIn: 'root'
})
export class MockPersonService {

  constructor() { }

  getAllPeople(): UserInfo[] {
    return thePeople;
  }
}

将显示表格的组件如下：

import { Component, OnInit } from '@angular/core';
import { MockPersonService, PersonInfo } from '../people/mockperson.service';

@Component({
  selector: 'app-persontable',
  templateUrl: './persontable.component.html',
  styleUrls: ['./persontable.component.css'],
})
export class PersontableComponent implements OnInit {
theOptions: DataTables.Settings = {};
peopleList: PersonInfo[] = [];

  constructor(perService: MockPersonService) {
    this.peopleList = perService.getAllPeople();
  }

  ngOnInit() {
    this.theOptions = {
      columns: [
        {title: 'ID', data: 'id'},
        {title: 'First Name', data: 'firstName'},
        {title: 'Middle Initial', data: 'midInitial'},
        {title: 'Last Name', data: 'lastName'},
      ],
      rowCallback: (row: Node, data: any[] | object, index: number) => {
        const self = this;
        // Unbind first in order to avoid any duplicate handler
        // (see https://github.com/l-lin/angular-datatables/issues/87)
        $('td', row).unbind('click');
        $('td', row).bind('click', () => {
          self.rowWasSelected(data);
        });
        return row;
      }
    };
  }

  rowWasSelected(smData: any): void {
    alert('Selected: ' + smData.firstName);
  }

该组件的HTML文件内容如下：

<table datatable [dtOptions]="theOptions" class="row-border hover">

在我的ngModule中，将MockPersonService声明为提供程序：

    ...
  providers: [MockPersonService]
    ...

该组件的所有代码均基于Angular Datatables网站上给出的说明（https://l-lin.github.io/angular-datatables/#/advanced/row-click-event）。

问题是，尽管我可以显示带有适当标题的表，但似乎没有如何进行显示的示例。用peopleList的内容填充表！所有示例似乎都假定用户将使用一些组件中的ajax方法来获取要以JSON格式显示的数据-我最终打算这样做但不是。该服务（在ngModule文件中声明为单例提供程序）将发送向服务器发送的有关people对象的请求（它将以JSON格式接收）放入其peopleList对象中，并与PersontableComponent和几个将来的组件共享peopleList对象。

如何用服务提供的数组中提供的信息填充Angular Datatable？在这例如，我需要能够获取peopleList数组的内容并将其显示在我的表中。

Answer 1

我认为问题是您没有将数据源提供给dataOptions。这将解决问题：

ngOnInit() {
    var self = this;
    this.theOptions = {
      data: this.peopleList,
      columns: [
        {title: 'ID', data: 'id'},
        {title: 'First Name', data: 'firstName'},
        {title: 'Middle Initial', data: 'midInitial'},
        {title: 'Last Name', data: 'lastName'},
      ],
      rowCallback: (row: Node, data: any[] | object, index: number) => {
        const self = this;
        // Unbind first in order to avoid any duplicate handler
        // (see https://github.com/l-lin/angular-datatables/issues/87)
        $('td', row).unbind('click');
        $('td', row).bind('click', () => {
          self.rowWasSelected(data);
        });
        return row;
      }
    };
  }

如何在Angular数据表中显示来自服务的数据

1 个答案: