数据未显示在角度表中答案

【问题标题】：Data not showing in angular table数据未显示在角度表中
【发布时间】：2021-06-04 19:03:30
【问题描述】：

我无法显示表格行，只会显示标题（here you can see the problem）。问题可能出在 Http 请求中。我得到了一个服务，它发出一个 http 请求以从 API 获取数据：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
  providedIn: 'root'
})
export class SequencesService {

  constructor(private http: HttpClient) { }

  public getData(){
    return this.http.get("https://bgpie.net/api/rrc/00/sequence?limit=20&page=1");
  }
}

然后一个组件有这个代码并将所有内容发送到 html 文档：

import {animate, state, style, transition, trigger} from '@angular/animations';
import {SequencesService} from '../sequences.service';
import {Sequences} from '../sequences';
import {MatTableDataSource} from '@angular/material/table';

@Component({
  selector: 'app-sequences',
  templateUrl: './sequences.component.html',
  styleUrls: ['./sequences.component.css']
})
export class SequencesComponent implements OnInit {

  ELEMENT_DATA: Sequences[] = [];
  displayedColumns: string[] = ['Sequence ID', 'Prefix', 'RRC', 'Start Time', 'End Time'];
  dataSource = new MatTableDataSource<Sequences>(this.ELEMENT_DATA);

  constructor(private service: SequencesService) { }

  ngOnInit(): void {
    this.getAllSequences();
  }

  public getAllSequences(){
    let resp = this.service.getData();
    resp.subscribe(report => this.dataSource.data = report as Sequences[]);
  }

}

这是html文档：

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <!--- Note that these columns can be defined in any order.
        The actual rendered columns are set as a property on the row definition" -->

  <!-- Position Column -->
  <ng-container matColumnDef="Sequence ID">
    <th mat-header-cell *matHeaderCellDef> Sequence ID </th>
    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="Prefix">
    <th mat-header-cell *matHeaderCellDef> Prefix </th>
    <td mat-cell *matCellDef="let element"> {{element.prefix}} </td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="RRC">
    <th mat-header-cell *matHeaderCellDef> RRC </th>
    <td mat-cell *matCellDef="let element"> {{element.rRC}} </td>
  </ng-container>

  <ng-container matColumnDef="Start Time">
    <th mat-header-cell *matHeaderCellDef> Start Time </th>
    <td mat-cell *matCellDef="let element"> {{element.start}} </td>
  </ng-container>

  <ng-container matColumnDef="End Time">
    <th mat-header-cell *matHeaderCellDef> End Time </th>
    <td mat-cell *matCellDef="let element"> {{element.end}} </td>
  </ng-container>

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

【问题讨论】：

尝试将“report as Sequences”更改为“report.json()”，结果将是数据项数组。
我没有使用 *ngFor，我实际上是从这个视频中复制了代码，它适用于他youtube.com/watch?v=Pk8twkT6esM
这种问题有多种可能：app.module.ts中没有添加HttpClient，要检查http是否有问题，可以在sibscribe方法中放入console.log并检查如果正在接收数据。
为什么不使用resp.subscribe(report => this.dataSource = new MatTableDataSource<Sequences>(report as Sequences[]));？

标签： angular html-table angular-material

【解决方案1】：

首先，report as Sequences[]错了。

因为您需要的数组是嵌套在属性items 中的。

其次，带参数调用API也有问题。

我还更正了SequencesService 处的 API 调用。

在Stackblitz查看结果。

【讨论】：