如何在 angular 4 中分配对变量的响应？

Question

如果有人可以帮助我理解如何将响应绑定到 angular4 中的视图，我只是试图使用 SteamService 从后端获取数据我已经检索并打印了数据，现在试图将其分配给 dataSource 使用导出接口，但它没有发生。下面代码中的错误是什么？

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

首先，dataSource指的是在定义dataSource时未定义的ELEMENT_DATA。

ELEMENT_DATA 的定义发生在 subscribe 的回调中，并且作用域为该回调。

要进行分配，您必须在 subscribe 的回调中使用 dataSource。

此外，您的 stream 没有用，除非您在组件的其他地方使用它。

你可以这样写你的代码：

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

另一种方法，你可以像这样声明dataSource：

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

并像这样设置数据：

this.dataSource.data(stream);

如何在 angular 4 中分配对变量的响应？

How to assign response to variable in angular 4?

javascript

angular2-services

angular