时间戳

首页 > 解决方案 > 数据未显示在角度表中

angular - 数据未显示在角度表中

问题描述

我无法显示表格行，只有标题会显示（在这里你可以看到问题）。问题可能出在 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>

标签： angularhtml-tableangular-material

解决方案

首先，report as Sequences[]是错误的。

因为您需要的数组是嵌套的，所以在 property 中items。

其次，使用参数调用 API 也存在问题。

我还更正了 API 调用SequencesService。

在Stackblitz查看结果。

推荐阅读