getting angular material table to work properly with api call

Question

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.

this is my main component

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

I am getting data back in my console.log statement

this is my 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>

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

Answer 1

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.

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 = [];
  }
}

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.

Answer 2

your variable datasource in the your component has name Datasource and in your html is datasource

 this.DataSource = res.recordset;   


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

you need change to:

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

or change the Datasource to datasource.