角度 api 数据表：未找到数据

Question

我正在尝试使用此 API 制作表格： https://run.mocky.io/v3/70e5b0ad-7112-41c5-853e-b382a39e65b7/people 我的表格的 html 结构出现但我的 API 的数据没有出现，我在控制台中没有错误

你有解决办法吗？

这是我的休息组件的结构（我的表格的代码）：

人.ts

export class people {
    id: string; 
    firstname: string;
    lastname: string;
    email: string;
    mobile: string; 
    city: string;
    country: string;

    constructor(id,firstName,lastName,email,mobile,city,country){
        this.id=id;
        this.firstname=firstName;
        this.lastname=lastName;
        this.email=email;
        this.mobile=mobile;
        this.city=city;
        this.country=country;
    }
}

rest.component.html

  <h1>Employee Dashboard</h1>
    
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>Id</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Email</th>
          <th>Address</th>
          <th>City</th>
          <th>Country</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor= "let user of users">
          <td>{{people.id}}</td>
          <td>{{people.firstname}}</td>
          <td>{{people.lastname}}</td>
          <td>{{people.email}}</td>
          <td>{{people.address}}</td>
          <td>{{people.city}}</td>
          <td>{{people.country}}</td>
        </tr>
      </tbody>
    </table>

rest.component.spec.ts

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './rest.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  });

  it(`should have as title 'project'`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('project');
  });

  it('should render title in a h1 tag', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain('Welcome to project!');
  });
});

rest.component.ts

import { Component, OnInit } from '@angular/core';
import { people } from './people';
import { RestService } from './rest.service';

@Component({
  selector: 'app-root',
  templateUrl: './rest.component.html',
  styleUrls: ['./rest.component.css']
})
export class RestComponent implements OnInit {
  people: people[] = [];
  constructor(public rs: RestService){

  }
  ngOnInit():void {
    this.rs.getUsers().subscribe((response) => {
this.people=response;
    })
  }
  title = 'project';
}

rest.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { people } from './people'

@Injectable({
  providedIn: 'root'
})
export class RestService {
 constructor(private http:HttpClient){}

 url:string= "https://run.mocky.io/v3/70e5b0ad-7112-41c5-853e-b382a39e65b7/people";
 getUsers(){
   return this.http.get<people[]>(this.url);
 }

}

Answer 1

您需要更改的代码将位于两个文件中

1. rest.component.html

   替换这个

   <tr *ngFor= "let user of users">
     <td>{{people.id}}</td>
     <td>{{people.firstname}}</td>
     <td>{{people.lastname}}</td>
     <td>{{people.email}}</td>
     <td>{{people.address}}</td>
     <td>{{people.city}}</td>
     <td>{{people.country}}</td>
   </tr>
   

   有了这个

   <tr *ngFor= "let user of users">
     <td>{{user.id}}</td>
     <td>{{user.firstname}}</td>
     <td>{{user.lastname}}</td>
     <td>{{user.email}}</td>
     <td>{{user.address}}</td>
     <td>{{user.city}}</td>
     <td>{{user.country}}</td>
   </tr>
   

2. 在rest.component.ts中

   替换

   ngOnInit():void {
       this.rs.getUsers().subscribe((response) => {
   this.people=response;
       })
   
   

   有了这个

   ngOnInit():void {
       this.rs.getUsers().subscribe((response) => {
   this.users=response.people;
       })
   

Answer 2

实际的 People 对象数组位于 API 响应中名为“people”的属性下。所以，修改服务代码：

getUsers(){
   return this.http.get<any>(this.url).pipe(
   map(response) => {
      return response['people'];
   })
  );
}

Answer 3

代码的问题是您将数据保存在人员中，而在前端您使用的是未定义的user。

<tbody>
        <tr *ngFor= "let p of people">
          <td>{{p.id}}</td>
          <td>{{p.firstname}}</td>
          <td>{{p.lastname}}</td>
          <td>{{p.email}}</td>
          <td>{{p.address}}</td>
          <td>{{p.city}}</td>
          <td>{{p.country}}</td>
        </tr>
      </tbody>

Answer 4

应该是 user.id 而不是 people.id

        <tr *ngFor= "let user of users">
          <td>{{user.id}}</td>
          <td>{{user.firstname}}</td>
          <td>{{user.lastname}}</td>
          <td>{{user.email}}</td>
          <td>{{user.address}}</td>
          <td>{{user.city}}</td>
          <td>{{user.country}}</td>
        </tr>