How to assign response to variable in angular 4?

Question

If someone can help me understand how to bind response to view in angular4, i was just trying to get data from backend using SteamService i have retrieve and printed the data now trying to assign it to dataSource using export interface but it is not happening. what is implemented wrong in below code ?

stream.component.html

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

      <!-- Position Column -->
      <ng-container matColumnDef="ticketNum">
        <mat-header-cell *matHeaderCellDef> Ticket Number </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.ticketNum}} </mat-cell>
      </ng-container>

      <!-- Name Column -->
      <ng-container matColumnDef="assetID">
        <mat-header-cell *matHeaderCellDef> Asset ID</mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.assetID}} </mat-cell>
      </ng-container>

      <!-- Weight Column -->
      <ng-container matColumnDef="severity">
        <mat-header-cell *matHeaderCellDef> Severity </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.severity}} </mat-cell>
      </ng-container>

      <!-- Color Column -->
      <ng-container matColumnDef="riskIndex">
        <mat-header-cell *matHeaderCellDef> Risk Index </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.riskIndex}} </mat-cell>
      </ng-container>
      <ng-container matColumnDef="riskValue">
        <mat-header-cell *matHeaderCellDef> Risk Value </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.riskValue}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="ticketOpened">
        <mat-header-cell *matHeaderCellDef> Ticket Opened </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.ticketOpened}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="lastModifiedDate">
        <mat-header-cell *matHeaderCellDef> Last Modified </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.lastModifiedDate}} </mat-cell>
      </ng-container>
      <ng-container matColumnDef="eventType">
        <mat-header-cell *matHeaderCellDef> Event Type </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.eventType}} </mat-cell>
      </ng-container>

      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>
  </div>
</div>

stream.module.ts

 import {
     Component,
     OnInit
 } from '@angular/core';
 import {
     StreamService
 } from '../stream.service';
 import {
     MatTableDataSource
 } from '@angular/material';

 @Component({
     selector: 'app-stream',
     templateUrl: './stream.component.html',
     styleUrls: ['./stream.component.css']
 })
 export class StreamComponent implements OnInit {
     displayedColumns = ['ticketNum', "assetID", "severity", "riskIndex", "riskValue", "ticketOpened", "lastModifiedDate", "eventType"];
     dataSource = new MatTableDataSource(ELEMENT_DATA);
     stream: any[];
     constructor(private streamService: StreamService) {};
     ngOnInit() {
         this.streamService.getAllStream().subscribe(stream => {
             this.stream = stream;
             const ELEMENT_DATA = Element[] = stream;
         });
     }

 }


 export interface Element {
     ticketNum: number;
     ticketOpened: number;
     eventType: string;
     riskIndex: string;
     riskValue: number;
     severity: string;
     lastModifiedDate: number;
     assetID: string;
 }

Answer 1

First of all, dataSource is referring to ELEMENT_DATA which is not defined when dataSource is defined.

The definition of ELEMENT_DATA occurs in the callback of subscribe and it is scoped to this callback.

To make your assignment, you have to use dataSource inside the callback of subscribe.

Also, your stream is useless unless you use it elsewhere in the component.

You can write your code like this:

import { Component, OnInit } from '@angular/core';
import { StreamService } from '../stream.service';
import { MatTableDataSource } from '@angular/material';

@Component({
    selector: 'app-stream',
    templateUrl: './stream.component.html',
    styleUrls: ['./stream.component.css']
})
export class StreamComponent implements OnInit {
    displayedColumns = ['ticketNum', "assetID", "severity", "riskIndex", "riskValue", "ticketOpened", "lastModifiedDate", "eventType"];
    dataSource: MatTableDataSource<Element[]>;

    constructor(private streamService: StreamService) {};

    ngOnInit() {
        this.streamService.getAllStream().subscribe(stream => {
            this.dataSource = new MatTableDataSource(stream);
        });
    }
}


export interface Element {
    ticketNum: number;
    ticketOpened: number;
    eventType: string;
    riskIndex: string;
    riskValue: number;
    severity: string;
    lastModifiedDate: number;
    assetID: string;
}

Another way, you can make it is declaring dataSource like this:

dataSource = new MatTableDataSource<Element[]>();

And setting data like this:

this.dataSource.data(stream);