node.js - 通过 Angular api 调用实现 Material Table

Question

我一直在使用 Angular 2 开发一个应用程序，作为一名新开发人员，这无疑是一件很困难的事情。到目前为止我已经做了很多工作，但我确实需要一些帮助。我包含了一个 plunkr，我用它来获取具有分页、过滤和排序功能的 Material 表，但是这个示例以及material.angular.io 上的所有其他示例都显示了一个数据库示例，该数据库是本质上是在组件类中硬编码/生成的。我有一个为 SQL 查询调用 api 的服务，我想用它来填充示例中的表，但是到目前为止我的尝试都失败了，我认为我在这个过程中已经不知所措了。

根据请求，我可以发布我的组件代码，但我担心我已经将其删除/修改到无法使用的程度。但在此之前，下面是我想要实现的 plunkr，以及我想用来填充数据表以代替 plunkr 的数据库和数据源的服务类。

如果您能提供帮助，请告诉我，您会让我非常头疼。

https://plnkr.co/edit/EU3BBlViWpPf2NJW4PXx?p=preview

我的服务

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';


@Injectable()
export class RcgqueueService {

  constructor(private http: Http) { }

  populateRCGQueue() {
    return this.http.get('/api/rcgqueue').map(res => res.json());
  }
}

以及我目前对组件代码的可悲尝试

import { Component, ElementRef, ViewChild, OnInit, forwardRef } from '@angular/core';
import { DataSource, SelectionModel } from '@angular/cdk/collections';
import { MatPaginator, MatSort, MatTable } from '@angular/material';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/debounceTime';
import { RcgqueueService } from './rcgqueue.service';

@Component({
  selector: 'app-rcgqueue',
  templateUrl: './rcgqueue.component.html',
  styleUrls: ['./rcgqueue.component.css']
})
export class RcgqueueComponent implements OnInit {
  isDataAvailable = false;
  displayedColumns = ['changeId', 'changeTitle', 'dateSubmitted', 'changeSponsor', 'changeDescription'];
  dataChange: BehaviorSubject<ChangeData[]> = new BehaviorSubject<ChangeData[]>([]);
  get data(): ChangeData[] { return this.dataChange.value; }
  dataSource: ExampleDataSource | null;

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(forwardRef(() => MatSort)) sort: MatSort;
  @ViewChild('filter') filter: ElementRef;

  constructor(private rcgservice: RcgqueueService) {
  }
  populateRCGQueue() {
    this.rcgservice.populateRCGQueue().subscribe(rcgitems => {
      this.dataChange = rcgitems;
      this.isDataAvailable = true;
    })
  }

  ngOnInit() {
    this.populateRCGQueue();
    this.dataSource = new ExampleDataSource(this, this.paginator, this.sort);
    Observable.fromEvent(this.filter.nativeElement, 'keyup')
      .debounceTime(150)
      .distinctUntilChanged()
      .subscribe(() => {
        if (!this.dataSource) { return; }
        this.dataSource.filter = this.filter.nativeElement.value;
      });
  }
}

export interface ChangeData {
  ChangeId: string;
  ChangeTitle: string;
  DateSubmitted: string;
  ChangeSponsor: string;
  ChangeDescription: string;
}

/**
 * Data source to provide what data should be rendered in the table. Note that the data source
 * can retrieve its data in any way. In this case, the data source is provided a reference
 * to a common data base, ExampleDatabase. It is not the data source's responsibility to manage
 * the underlying data. Instead, it only needs to take the data and send the table exactly what
 * should be rendered.
 */
export class ExampleDataSource extends DataSource<any> {
  _filterChange = new BehaviorSubject('');
  get filter(): string { return this._filterChange.value; }
  set filter(filter: string) { this._filterChange.next(filter); }

  dataChange: BehaviorSubject<ChangeData[]> = new BehaviorSubject<ChangeData[]>([]);
  get data(): ChangeData[] { return this.dataChange.value; }

  filteredData: ChangeData[] = [];
  renderedData: ChangeData[] = [];

  constructor(private rcgcomponent: RcgqueueComponent,
    private _paginator: MatPaginator,
    private _sort: MatSort) {
    super();

    this._filterChange.subscribe(() => this._paginator.pageIndex = 0);
  }

  /** Connect function called by the table to retrieve one stream containing the data to render. */
  connect(): Observable<ChangeData[]> {
    // Listen for any changes in the base data, sorting, filtering, or pagination
    const displayDataChanges = [
      this.rcgcomponent.dataChange,
      this._sort.sortChange,
      this._filterChange,
      this._paginator.page,
    ];

    return Observable.merge(...displayDataChanges).map(() => {
      // Filter data
      this.filteredData = this.rcgcomponent.data.slice().filter((item: ChangeData) => {
        const searchStr = (item.ChangeDescription + item.ChangeSponsor).toLowerCase();
        return searchStr.indexOf(this.filter.toLowerCase()) !== -1;
      });

      // Sort filtered data
      const sortedData = this.sortData(this.filteredData.slice());

      // Grab the page's slice of the filtered sorted data.
      const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
      this.renderedData = sortedData.splice(startIndex, this._paginator.pageSize);
      return this.renderedData;
    });
  }

  disconnect() { }

  /** Returns a sorted copy of the database data. */
  sortData(data: ChangeData[]): ChangeData[] {
    if (!this._sort.active || this._sort.direction === '') { return data; }

    return data.sort((a, b) => {
      let propertyA: number | string = '';
      let propertyB: number | string = '';

      switch (this._sort.active) {
        case 'changeId': [propertyA, propertyB] = [a.ChangeId, b.ChangeId]; break;
        case 'changeTitle': [propertyA, propertyB] = [a.ChangeTitle, b.ChangeTitle]; break;
        case 'dateSubmitted': [propertyA, propertyB] = [a.DateSubmitted, b.DateSubmitted]; break;
        case 'changeSponsor': [propertyA, propertyB] = [a.ChangeSponsor, b.ChangeSponsor]; break;
        case 'changeDescription': [propertyA, propertyB] = [a.ChangeDescription, b.ChangeDescription]; break;
      }

      const valueA = isNaN(+propertyA) ? propertyA : +propertyA;
      const valueB = isNaN(+propertyB) ? propertyB : +propertyB;

      return (valueA < valueB ? -1 : 1) * (this._sort.direction === 'asc' ? 1 : -1);
    });
  }
}

我已经从 plunkr 代码中删除了与从表中选择有关的任何内容，剩下的就是我当前所在的位置。如果这最终带来的阻碍大于帮助，我深感抱歉。

哦，这可能会有所帮助，我的 api.js 在服务器端以及我正在使用的查询。 (迄今为止唯一的一个)

const express = require('express');
const async = require('async');
const jwt = require('jsonwebtoken');
const shape = require('shape-json');
const router = express.Router();

var sql = require('mssql/msnodesqlv8');
var config = {
    driver: 'msnodesqlv8',
    connectionString: 'Driver=SQL Server Native Client 11.0;Server=localhost;Database=Change;Trusted_Connection=yes;',
}

var conn = new sql.ConnectionPool(config);
conn.connect().then(function() {
     log("Change Governance Database Connection opened");
}).catch(function (err) {
    console.error(new Date() + " - Issue connecting to the MS SQL database.", err);
});

router.get('/', (req, res) => {
    res.send('api works');
});

router.get('/rcgqueue', (req, res) => {
    new sql.Request(conn)
    .query('SELECT ChangeId, ChangeTitle, DateSubmitted, ChangeSponsor, ChangeDescription FROM dbo.ChangeEvaluationForm;')
    .then(function(recordset) {
        log("Successful query request for RCG Records.");
        res.send(recordset.recordset);
    }).catch(function(err) {
        log(err);
        res.send("Issue querying database!");
    });
});

/********************************/
/*          Functions           */
/********************************/
// Log lines with date/time for server
function log(msg) {
    console.log(new Date() + " - " + msg);
};

module.exports = router;

编辑:添加模板和错误。

模板

<!-- Issues
https://github.com/angular/angular/issues/16614
https://github.com/angular/angular/issues/17572 -->
<div *ngIf="isDataAvailable">
  <div class="example-container mat-elevation-z8">
    <div class="example-header">
      <md-input-container floatPlaceholder="never">
        <input mdInput #filter placeholder="Filter">
      </md-input-container>
    </div>

    <md-table #table [dataSource]="dataSource" mdSort>

      <!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" -->

      <!-- ChangeId Column -->
      <ng-container cdkColumnDef="changeId">
        <md-header-cell *cdkHeaderCellDef md-sort-header> ChangeId </md-header-cell>
        <md-cell *cdkCellDef="let row"> {{row.ChangeId}} </md-cell>
      </ng-container>

      <!-- ChangeTitle Column -->
      <ng-container cdkColumnDef="changeTitle">
        <md-header-cell *cdkHeaderCellDef md-sort-header> Change Title </md-header-cell>
        <md-cell *cdkCellDef="let row"> {{row.ChangeTitle}}% </md-cell>
      </ng-container>

      <!-- DateSubmitted -->
      <ng-container cdkColumnDef="dateSubmitted">
        <md-header-cell *cdkHeaderCellDef md-sort-header> Date Submitted </md-header-cell>
        <md-cell *cdkCellDef="let row"> {{row.DateSubmitted}} </md-cell>
      </ng-container>

      <!-- ChangeSponsor -->
      <ng-container cdkColumnDef="changeSponsor">
        <md-header-cell *cdkHeaderCellDef md-sort-header> Change Sponsor </md-header-cell>
        <md-cell *cdkCellDef="let row"> {{row.ChangeSponsor}} </md-cell>
      </ng-container>

      <!-- ChangeDescription -->
      <ng-container cdkColumnDef="changeDescription">
        <md-header-cell *cdkHeaderCellDef md-sort-header> Change Description </md-header-cell>
        <md-cell *cdkCellDef="let row"> {{row.ChangeDescription}} </md-cell>
      </ng-container>

      <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
      <md-row *cdkRowDef="let row; columns: displayedColumns;">
      </md-row>
    </md-table>

    <div class="example-no-results" [style.display]="dataSource.renderedData.length == 0 ? '' : 'none'">
      No changes found matching filter.
    </div>

    <md-paginator #paginator [length]="dataSource.filteredData.length" [pageIndex]="0" [pageSize]="25" [pageSizeOptions]="[5, 10, 25, 100]">
    </md-paginator>
  </div>
</div>

最后是我的错误的屏幕截图

Answer 1

你得到的原因

Cannot set property pageIndex of undefined

您将表包装在*ngIf中，并且当您将@ViewChild传递给DataSource类时，它们尚未初始化。

我通过获取数据后调用初始化解决了这个问题:

this.rcgservice.populateRCGQueue().subscribe(rcgitems => {
  this.dataChange.next(rcgitems);
  this.isDataAvailable = true;
  this.cdRef.detectChanges(); // make sure that all ViewChilds were initialized
  this.initSource();

另一个错误是您将数据分配给BehaviourSubject

this.rcgservice.populateRCGQueue().subscribe(rcgitems => {
   this.dataChange = rcgitems;

应该是:

this.dataChange.next(rcgitems);

我还在您的模板中添加了一些安全导航运算符:

[length]="dataSource?.filteredData.length"

和

[style.display]="dataSource?.renderedData.length == 0 ? '' : 'none'"

<强> Plunker Example

如果我们不使用ngIf，那么我们就不再需要ChangeDetectorRef

<强> Plunker Example