Question

我正在创建一个有角度的表，并希望用来自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", …}

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

Answer 1

尝试一下，希望对您有所帮助：

设置正确的dataSource类型：

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

，然后将数据设置为：

this.dataSource.data = data11;

Answer 2

我认为，当您以这种方式使用数据而不是使用MatTableDataSource时，必须引用表并调用renderRows（）函数，因为初始时您的值是空的，并且在您的可观察对象发出值时被填充。

如果提供了数据数组，则在添加，删除或移动数组对象时必须通知表。这可以通过调用renderRows（）函数来完成，该函数将渲染自上一张表以来的差异。如果更改数据数组引用，则表将自动触发对行的更新。

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

在您的组件中

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

用来自HTTP请求的数据填充角度表

2 个答案: