使用api调用Angular实现材料表

Question

我一直在使用Angular 2开发一个应用程序,但作为一个新的开发人员,它确实是一个挣扎.到目前为止,我已经管理了很多,但我确实需要一些帮助.我正在使用一个plunkr,我正在使用它来获取带有分页,过滤和排序的Material Table,但是这个例子,以及material.angular.io上的所有其他示例都显示了一个带有数据库的示例基本上在组件类中硬编码/生成.我有一个服务调用api进行SQL查询,我想用这个填充示例中的表,但是到目前为止我的尝试都是悲惨的失败,我想我在这个过程中已经不堪重负.

根据要求,我可以发布我的组件代码,但我担心我已经去除/修改它超出了任何使用的范围.但是在那之前,下面是我想要实现的内容,以及我想用来填充数据表而不是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

你之所以得到这个原因

无法设置pageIndexundefined的属性

是你将表格包装进去*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示例

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

Plunker示例