角度表中未显示的数据

我无法显示表格行,只有标题会显示( 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>