Question

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

stream.component.html

dataSource

stream.module.ts

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

Answer 1

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

ELEMENT_DATA的定义发生在subscribe的回调中，并且它的范围限定为此回调。

要完成作业，您必须在dataSource的回调中使用subscribe。

此外，除非您在组件的其他位置使用它，否则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);

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

1 个答案: