如何为角度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);