使角形材料表与api调用一起正常工作 [英] getting angular material table to work properly with api call

问题描述

我正在尝试使Angular材质表可以通过对数据库的api调用来工作，但我只想与新材质表一起显示正确的数据，并且由于某些原因，它无法正常工作.

I am trying to get Angular material table to work with an api call to my database I get the right data I just want to display with the new material table and for some reason this is not working as expected.

这是我的主要组成部分

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

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

this is my service module making the call

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语句中获取数据

I am getting data back in my console.log statement

这是我的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中没有数据

I am getting my table headers but no data in the cdkCellDef

推荐答案

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

You are on right track with the code you provided in the comments. To pass the quote to service, you need add an addition parameter to the constructor of AOSDataSource class. Then you can pass the quote value from your component when created the instance of AOSDataSource from getAosQuote function.

柱塞演示

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()并进行渲染数据.因此，我将其添加为解决方法.

Note: I added an extra boolean flag and setTimeout in the getAosQuote function because I was running into problem where, right after initialization, the table requires couple seconds and an event to trigger connect() and render the data. So, I added that as a workaround.

这篇关于使角形材料表与api调用一起正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！