无法从数据库获取数据到 Angular

Question

所以我试图从我的后端 Python 获取数据，并且数据库在 SQLite 中，并在我的 Angular 前端。我认为我的功能正确，但是当我尝试打开页面时，它会收到以下错误消息： ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed 我对角度很陌生，所以任何可能导致此问题的帮助都会有所帮助。谢谢

这是我的 users.component.html：

<table class="table">
  <thead class="thead-dark">
  <tr>
    <th scope="col">ID</th>
    <th scope="col">Username</th>
    <th scope="col">Email</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let user of userList">
    <td>{{user.ID}}</td>
    <td>{{user.username}}</td>
    <td>{{user.email}}</td>
  </tr>
  </tbody>
</table>

这是我的 users.component.ts：

import {Component, OnInit} from '@angular/core';
import {UserData} from "./users.model";
import {AppService} from "../app.service";

export interface UserData {
  ID: number;
  username: string;
  email: string;
}


@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {

  selectedUser?: UserData;

  userList: UserData[] = [];

  constructor(private appService: AppService) {
  }

  ngOnInit() {
    this.appService.getUsers().subscribe(
      response=>{
        this.userList=response
      }
    )
  }
}

编辑：应 rahals 的要求。这是postman中的get方法，获取用户的json：

"results": [
        {
            "id": 1,
            "first_name": "huh",
            "email": "damn@damn.com",
            "username": "damn"
        },
        {
            "id": 2,
            "first_name": "son",
            "email": "damnson@me.com",
            "username": "Administrator"
        },

Answer 1

我把这个作为答案而不是leight cmets。

根据您的问题，我没有看到 Angular 代码有任何问题。可能问题在于来自后端的数据类型。 你瘦了，你得到了一个数组 ob 对象。但是你没有得到那种类型的数据，它是不同的。这就是为什么 Angular 无法识别对象的属性。最好的办法是

1. 在浏览器中打开开发者工具（按 F12）
2. 转到网络标签
3. 然后刷新网页
4. 您将看到每个请求的响应数据，然后单击 特定请求，您将确定问题。
5. 您将看到类似于 的内容

6。检查您收到的响应，如果它不遵循 JSON 数组类型，那就是问题所在，您将需要从后端修复它

根据更新的问题，您应该如下更改代码，

    ngOnInit() {
    this.appService.getUsers().subscribe(
      response=>{
        this.userList=response.results
      }
    )
  }

Answer 2

您可以从 observable 中获取更多信息，这可以帮助您找出问题所在：

this.appService.getUsers().subscribe(
  response => { this.userList=response },
  err => console.log('HTTP Error', err),         // <-- Error handling
  () => console.log('HTTP request completed.')   // <-- Finally block
)

您可能希望确保您的后端返回的是某种用户的集合，而不仅仅是一个用户，您的问题不清楚是否是这种情况。

{      // <---- Object
            "id": 4,
            "first_name": "John",
            "email": "john.doe@me.com",
            "username": "JohnD"
}

这看起来像一个对象。

[     // <---- Array of objects
    {
            "id": 4,
            "first_name": "John",
            "email": "john.doe@me.com",
            "username": "JohnD"
    }
]

这是一个对象数组的样子。

"results": [     // <---- Object with a field results, containing an array of objects
    {
            "id": 4,
            "first_name": "John",
            "email": "john.doe@me.com",
            "username": "JohnD"
    }
]

你的数组好像被包裹了，像这样。

您的 getUsers() 函数不返回类型为 UserData[ ] 的 observable，而是类型为 { results: UserData[ ] }