Json 角度api数据表：未找到任何数据

我正在尝试使用以下API创建一个表： 我的表格的html结构会出现，但不是API的数据，控制台中没有错误

你有解决办法吗

以下是我的rest组件的结构（我的表的代码）：

人民网

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.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);
 }

}

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient}；
从“/people”导入{people}
@注射的({
providedIn:'根'
})
导出类REST服务{
构造函数（私有http:HttpClient）{}
url:string=”https://run.mocky.io/v3/70e5b0ad-7112-41c5-853e-b382a39e65b7/people";
getUsers（）{
返回this.http.get（this.url）；
}
}

它应该是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>

{{user.id}
{{user.firstname}
{{user.lastname}
{{user.email}
{{user.address}
{{user.city}
{{user.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>

替换这个

<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>

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

---

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

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>

{{p.id}}
{{p.firstname}}
{{p.lastname}
{{p.email}
{{p.address}}
{{p.city}
{{p.country}

人员对象的实际数组位于API响应中名为“人员”的属性下。因此，请修改服务代码：

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

getUsers（）{
返回this.http.get（this.url）.pipe(
映射（响应）=>{
回复[‘人’]；
})
);
}

嘿，你错过的第一件事是

{{{people.id}

应该有user.idit即使与user而不是与people而是ty；）一起工作也不起作用它仍然不工作，即使是与用户而不是与人，但ty；）@KalSttr或者更改此变量名people:people[]=[]；给用户：人[]=[]；或者更改html{p.id}{p.firstname}{{p.lastname}{{p.email}{{p.address}{p.city}{p.country}}@KalSttr，您在html中使用它作为用户的let用户，但在ts文件中变量名不是users，而是people。在两个地方都做同样的。在ts文件中将其名称更改为用户：people[]=[]；或者在html文件中作为let p of people，因为变量名是ts文件中的people。我尝试了这两种解决方案，但都不起作用；）它不会向mei返回任何错误，因为“类型“people[]”上不存在属性“people”，并且类型“RestComponent”上不存在属性“users”

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