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

我有一个角度数据表，我正试图与服务一起使用。我有一个测试版本的服务（模拟），它有一个 我要显示的信息数组

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

我的服务代码相当简单：

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

该组件的所有代码都基于Angular Datatables站点上给出的说明 （）

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

如何使用服务提供的数组中提供的信息填充角度数据表？在这个

---

例如，我需要能够获取peopleList数组的内容并将其显示在我的表中。

我认为问题在于您没有将数据源提供给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;
      }
    };
  }

---

您提到ajax是对的，在“with ajax”选项卡上的示例中，您可以看到如何做到这一点（使用服务而不是http.get）。基本上，您必须添加dtTrigger

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