使用 api 调用使角度材料表正常工作

Question

我正在尝试让 Angular 材料表与对我的数据库的 api 调用一起工作，我得到了我只想用新材料表显示的正确数据，但由于某种原因，这没有按预期工作。

这是我的主要组件

import { Component } from '@angular/core';
import {AosService} from './app.aos.service.component'
import {QuoteModel} from './QuoteModel'
import {DataSource} from '@angular/cdk';

@Component({
  selector: 'app-aos',
  providers: [AosService],
  templateUrl: './app.aos.quoteQuery.component.html',
  styleUrls: ['./app.aos.quoteQuery.component.scss']
})
export class AOSAppComponent {
    displayedColumns = ['OrdNbr', 'sotypeid', 'user6', 'LUpd_DateTime', 'User3', 'crtd_user', 'S4Future01', 'SlsperID', 'TotMerch', 'CustOrdNbr'];
    DataSource;
    public datas;
    public hidData = true;

    constructor(private _aosService: AosService) {

    }

    getAosQuote(quote: string) {
      this._aosService.getQuoteQueryData(quote.toUpperCase()).subscribe(res => {
        this.hidData = false;
       this.DataSource = res.recordset;
        console.log(this.DataSource);
      })  
    }
}

这是我拨打电话的服务模块

import { Injectable } from '@angular/core';
import { Headers, Http, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { Observable } from 'rxjs/Rx';
import {QuoteModel} from './QuoteModel'

@Injectable()
export class AosService {
    private headers = new Headers({ 'content-type': 'application/json', 'Accept': 'application/json' });
    private options = new RequestOptions({ headers: this.headers });
    private aosUrl = 'http://localhost:3001/api/query/'

    constructor(private http: Http) { }

    getQuoteQueryData(quote: string) {
        return this.http.get(this.aosUrl + quote, this.options)
            .map((res: any) => res.json())
            .catch((error: Response) => [{ status: error }]);
    }
}

我在我的 console.log 语句中取回数据

这是我的html

<app-aos-header></app-aos-header>
<div class="container">
    <div>
        <md-input-container class="aos-full-width">
            <input type="search" (keyup.enter)="getAosQuote(quote.value)" #quote mdInput placeholder="Quote Number" required>
        </md-input-container>
    </div>
    <div>
        <button md-raised-button color="primary" (click)="getAosQuote(quote.value)" type="button">Search</button>
    </div>
</div>
<div [hidden]="hidData" class="example-container mat-elevation-z8">
    <md-table #table [dataSource]="dataSource">

        <ng-container cdkColumnDef="CustOrdNbr">
            <md-header-cell *cdkHeaderCellDef> Customer Order Number </md-header-cell>
            <md-cell *cdkCellDef="let row"> {{row.CustOrdNbr}} </md-cell>
        </ng-container>

        <ng-container cdkColumnDef="LUpd_DateTime">
            <md-header-cell *cdkHeaderCellDef> Last Update </md-header-cell>
            <md-cell *cdkCellDef="let row"> {{row.LUpd_DateTime}}% </md-cell>
        </ng-container>

        <ng-container cdkColumnDef="OrdNbr">
            <md-header-cell *cdkHeaderCellDef> Order Number </md-header-cell>
            <md-cell *cdkCellDef="let row"> {{row.OrdNbr}} </md-cell>
        </ng-container>

        <ng-container cdkColumnDef="S4Future01">
            <md-header-cell *cdkHeaderCellDef>Future</md-header-cell>
            <md-cell *cdkCellDef="let row">{{row.S4Future01}} </md-cell>
        </ng-container>

        <ng-container cdkColumnDef="SlsperID">
            <md-header-cell *cdkHeaderCellDef>Sales person</md-header-cell>
            <md-cell *cdkCellDef="let row">{{row.SlsperID}} </md-cell>
        </ng-container>

        <ng-container cdkColumnDef="TotMerch">
            <md-header-cell *cdkHeaderCellDef>Total Merchandise</md-header-cell>
            <md-cell *cdkCellDef="let row">{{row.TotMerch}} </md-cell>
        </ng-container>

        <ng-container cdkColumnDef="User3">
            <md-header-cell *cdkHeaderCellDef>User 3</md-header-cell>
            <md-cell *cdkCellDef="let row">{{row.User3}} </md-cell>
        </ng-container>

        <ng-container cdkColumnDef="crtd_user">
            <md-header-cell *cdkHeaderCellDef>crtd_user</md-header-cell>
            <md-cell *cdkCellDef="let row">{{row.crtd_user}} </md-cell>
        </ng-container>

        <ng-container cdkColumnDef="sotypeid">
            <md-header-cell *cdkHeaderCellDef>SO Type</md-header-cell>
            <md-cell *cdkCellDef="let row">{{row.sotypeid}} </md-cell>
        </ng-container>

        <ng-container cdkColumnDef="user6">
            <md-header-cell *cdkHeaderCellDef>user 6</md-header-cell>
            <md-cell *cdkCellDef="let row">{{row.user6}} </md-cell>
        </ng-container>

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

我正在获取表格标题，但 cdkCellDef 中没有数据

Answer 1

您在 cmets 中提供的代码是正确的。要将quote 传递给服务，您需要在AOSDataSource 类的constructor 中添加一个附加参数。然后，您可以在从 getAosQuote 函数创建 AOSDataSource 的实例时从组件中传递 quote 值。

Plunker demo

ts：

export class AOSAppComponent {

  displayedColumns = ['OrdNbr', 'sotypeid', 'user6', 'LUpd_DateTime', 'User3', 'crtd_user', 'S4Future01', 'SlsperID', 'TotMerch', 'CustOrdNbr'];
  dataSource: AOSDataSource | null;

  tableVisible = false;

  constructor(private appState: AppState){ }

  getAosQuote(quote: string, keepFocus: boolean) {

    if(!this.tableVisible){
     setTimeout(() => { 
        document.getElementById('quote').blur();
        if(keepFocus){
          document.getElementById('quote').focus();
        }
        this.tableVisible = true}, 
      2000) 
    }
    this.dataSource = new AOSDataSource(this.appState, quote);
  }  
}

export class AOSDataSource extends DataSource<any> {
  constructor(private appState: AppState, private quote: String) {
    super();
  }

  subject: BehaviorSubject<[]> = new BehaviorSubject<[]>([]);

  connect(): Observable<[]> {
      console.log('connect');
      if (!this.subject.isStopped)
          this.appState.getQuoteQueryData(this.quote.toUpperCase())
              .subscribe({
                next: (value) => {
                  console.log(value);
                  this.subject.next(value);
                }
              });
      return Observable.merge(this.subject);
  }

  disconnect() {
      this.subject.complete();
      this.subject.observers = [];
  }
}

注意：我在getAosQuote 函数中添加了一个额外的boolean 标志和setTimeout，因为我遇到了问题，在初始化之后，表格需要几秒钟和一个触发connect() 并呈现的事件数据。因此，我将其添加为一种解决方法。

Answer 2

您的组件中的变量数据源具有名称 Datasource 并且在您的 html 中是数据源

 this.DataSource = res.recordset;   


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

你需要改成：

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

或将数据源更改为数据源。