Wie man Antwort auf Variable in Winkel 4 zuweist?

Question

Wenn jemand mir helfen kann zu verstehen, wie Antwort an view in angular4 zu binden, ich habe gerade versucht, Daten aus dem Backend mit SteamService Ich habe abrufen und drucken die Daten jetzt versuchen, es zu dataSource mit Export-Schnittstelle zuweisen, aber es ist nicht passiert . Was ist in unten stehendem Code falsch implementiert?

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

Zu allererst dataSource bezieht sich auf ELEMENT_DATA die, wenn sie nicht definiert ist dataSource definiert ist.

Die Definition von ELEMENT_DATA tritt im Callback von subscribe auf und ist auf diesen Rückruf beschränkt.

Um Ihre Zuweisung vorzunehmen, müssen Sie dataSource innerhalb des Rückrufs von subscribe verwenden.

Auch Ihre stream ist nutzlos, wenn Sie es an anderer Stelle in der Komponente verwenden.

Sie können Ihren Code wie folgt schreiben:

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

Ein anderer Weg, können Sie machen es dataSource wie folgt erklärt:

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

Und Daten wie diese Einstellung:

this.dataSource.data(stream);