从角度为 16 的 API 检索的数据将不会显示

Question

我在显示从 API 获得的数据时遇到了麻烦，我多次浏览了代码都找不到任何问题，并且我的控制台没有错误，同样浏览器显示分页但没有预期的数据。我正在使用测试 API。

模块

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {MatPaginatorModule} from '@angular/material/paginator';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DataTableComponent } from './data-table/data-table.component';
import {MatTableModule} from '@angular/material/table';
import { HttpClientModule } from '@angular/common/http';


@NgModule({
  declarations: [
    AppComponent,
    DataTableComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatPaginatorModule,
    MatTableModule,
    HttpClientModule
  ],
  providers: [HttpClientModule],
  bootstrap: [AppComponent]
})

export class AppModule { }

api.service.ts 文件

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http'
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private apiUrl = 'https://random-data-api.com/api/v2/users?size=50&is_json=true'

  constructor(private http: HttpClient) { }

  getData(page: number, pageSize: number): Observable<any>{
    const url = `${this.apiUrl}?page=${page}&pageSize=${pageSize}`;
    return this.http.get(url);
  }
}

数据表.component.ts

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../api.service';

@Component({
  selector: 'app-data-table',
  templateUrl: './data-table.component.html',
  styleUrls: ['./data-table.component.css']
})
export class DataTableComponent implements OnInit {
  displayedColumns: string[] = ['id', 'name', 'email'];
  dataSource: any[] = [];
  pageSize = 10;
  currentPage = 1;
  totalItems = 0;

  constructor(private apiservice: ApiService) {}

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

  loadData(): void {
    this.apiservice.getData(this.currentPage, this.pageSize).subscribe((data: any) => {
      this.dataSource = data.totalItems;
      this.totalItems = data.totalItems;
    });
  }

  onPageChange(event: any): void {
    this.currentPage = event.pageIndex + 1;
    this.pageSize = event.pageSize;
    this.loadData();
  }
  
}

数据表.component.html

<table mat-table [dataSource] = "dataSource">
    <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef>ID</th>
        <td mat-cell *matCellDef="let item">{{item.id}}</td>
    </ng-container>

    <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef>Name</th>
        <td mat-cell *matCellDef="let item">{{item.name}}</td>
    </ng-container>

    <ng-container matColumnDef="email">
        <th mat-header-cell *matHeaderCellDef>Email</th>
        <td mat-cell *matCellDef="let item">{{item.email}}</td>
    </ng-container>

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

</table>

<mat-paginator
    [length]="totalItems"
    [pageSize]="pageSize"
    [pageIndex]="currentPage - 1"
    [pageSizeOptions]="[10, 20, 30]"
    (page)="onPageChange($event)" 
></mat-paginator>

Answer 1

没有显示任何内容，因为

totalItems

是

undefined

。如果您查看测试 API 返回的内容，您会发现它只是一个包含 50 个项目的数组（因为您将

size

设置为 50）。

基本上，您收到的数据结构似乎与您期望的不同。 正如 SO 充满猴子指出的那样，您将

totalItems

分配给

dataSource

和

totalItems

，所以即使您正确准备了数据结构，仍然存在问题。