使用来自 http 请求的数据填充角度表答案

【问题标题】：Filling an angular table with data from http request使用来自 http 请求的数据填充角度表
【发布时间】：2020-03-28 07:29:06
【问题描述】：

我正在创建一个有角度的表格，并希望用来自 url 的数据填充它。我按照教程创建了一个表格。代码

dataSource : Parameters[]

  getData(floor) {
    console.log('Making a request')
    this.vavService.getVavData(floor)
      .subscribe(
        (data11: any) => {
          console.log(data11);
          this.dataSource = data11;
          console.log(this.dataSource)
        }
      )

  }

参数类

export class Parameters {
    'date' : string;
    'deviceID' : string;
    'nvo_air_damper_position' : string;
    'nvo_airflow' : string;
    'nvo_temperature_sensor_pps' : string;
    'timestamp' : string;
    'vavID' : number;
    'miloID' : string;
    'miloTemperature' : number;
}

html代码

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

    <ng-container matColumnDef="date">
      <mat-header-cell *matHeaderCellDef>Date</mat-header-cell>
      <mat-cell *matCellDef="let policy"></mat-cell>
    </ng-container>

    <ng-container matColumnDef="deviceID">
      <mat-header-cell *matHeaderCellDef>DeviceID</mat-header-cell>
      <mat-cell *matCellDef="let policy"></mat-cell>
    </ng-container>

    <ng-container matColumnDef="damper">
      <mat-header-cell *matHeaderCellDef>Damper Position</mat-header-cell>
      <mat-cell *matCellDef="let policy"></mat-cell>
    </ng-container>

    <ng-container matColumnDef="airflow">
      <mat-header-cell *matHeaderCellDef>Air Flow</mat-header-cell>
      <mat-cell *matCellDef="let policy"></mat-cell>
    </ng-container>

    <ng-container matColumnDef="temperature">
      <mat-header-cell *matHeaderCellDef>Temperature</mat-header-cell>
      <mat-cell *matCellDef="let policy"></mat-cell>
    </ng-container>

    <ng-container matColumnDef="time">
      <mat-header-cell *matHeaderCellDef>TimeStamp</mat-header-cell>
      <mat-cell *matCellDef="let policy"></mat-cell>
    </ng-container>

    <ng-container matColumnDef="vavID">
      <mat-header-cell *matHeaderCellDef>VAV ID</mat-header-cell>
      <mat-cell *matCellDef="let policy"></mat-cell>
    </ng-container>

    <!-- <ng-container matColumnDef="miloID">
        <mat-header-cell *matHeaderCellDef>Milo ID</mat-header-cell>
        <mat-cell *matCellDef="let policy"></mat-cell>
      </ng-container>

      <ng-container matColumnDef="miloTemperature">
          <mat-header-cell *matHeaderCellDef>Milo Temperature</mat-header-cell>
          <mat-cell *matCellDef="let policy"></mat-cell>
        </ng-container> -->

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

  </mat-table>
</div>

当我加载组件时，api 调用成功，我可以在控制台中看到数据。我还在浏览器中看到了表格标题

0: {date: "2019-12-03", deviceId: "fd00::212:4b00:1957:d616", nvo_air_damper_position: "100.0", nvo_airflow: "0.0", nvo_temperature_sensor_pps: "327.6700134277344", …}
1: {date: "2019-12-03", deviceId: "fd00::212:4b00:1957:d616", nvo_air_damper_position: "100.0", nvo_airflow: "0.0", nvo_temperature_sensor_pps: "327.6700134277344", …}

但是数据绑定没有发生。有人可以帮我绑定数据吗？谢谢

【问题讨论】：

标签： json angular api html-table angular-material

【解决方案1】：

试试这个，希望对你有帮助：

设置正确的dataSource类型：

dataSource: MatTableDatsSource<Parameters> = new MatTableDataSource<Parameters>([]);

并设置如下数据：

this.dataSource.data = data11;

【讨论】：

【解决方案2】：

我认为当您以这种方式使用数据而不是使用 MatTableDataSource 时，您必须引用您的表并调用 renderRows() 函数，因为最初您的值是空的，并且当您的 observable 发出一个值时会被填充。

如果提供了数据数组，则必须在添加、删除或移动数组的对象时通知表。这可以通过调用 renderRows() 函数来完成，该函数将呈现自上次表渲染以来的差异。如果数据数组引用发生变化，表格会自动触发行的更新。

在 mat-table 标签处，添加#table1 <mat-table #table1>

在你的组件中

添加@ViewChild('table1', {static: false}) table: MatTable<any>; 然后在你设置好数据后，调用this.table.renderRows();

【讨论】：