我在从数据库中调用信息时遇到问题

Question

我的对象数组很好，但它不想在我的 HTML 中显示我在谷歌上找不到解决方案。你能帮帮我吗？

我的界面：

 export interface User { 
    name?: string;
    firstname?: string;
    mail?: string;
    password?: number;
    age?: number;
  }

我的服务：

import {Injectable} from '@angular/core';
import {Observable, throwError} from 'rxjs';
import {catchError, map} from 'rxjs/operators';
import {HttpClient, HttpHeaders, HttpErrorResponse} from '@angular/common/http';
import { User } from '../models/user.model';


@Injectable({
providedIn: 'root',
})

export class UserService {

apiUrl: string = 'http://localhost:3000/User';
headers = new HttpHeaders().set('Content-Type', 'application/json');

constructor(private http: HttpClient) {
}

public getUsers(): Observable<User[]> {
 return this.http.get<Array<User>>
 (`${this.apiUrl}/getAll`)
  .pipe(
    catchError(this.errorMgmt),
 );
}

Ts：

 /* tslint:disable:no-console */
 import {Component, OnInit} from '@angular/core';
 import {UserService} from '../../../../../@core/services/user.service';
 import {User} from '../../../../../@core/models/user.model';

 @Component({
   selector: 'ngx-list-chart',
   templateUrl: './list-chart.component.html',
   styleUrls: ['./list-chart.component.scss'],
  })
 export class ListChartComponent implements OnInit {

 users: Array<User> = [];

 constructor(private userService: UserService) {
 }

 getUsersName() {
  this.userService.getUsers().subscribe(res => {
   this.users = res;
   console.log('test', this.users);
  });
  }

ngOnInit() {
  this.getUsersName();
 }
}

我的 HTML：

   <ul>
    <li *ngFor="let planet of users">
     {{ planet.name }} {{ planet.mail }}
     {{ planet.password }}
     {{ planet.firstname }}
     {{ planet.age }}
    </li>
   </ul>

我的错误：

core.js:4197 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
    at NgForOf.ngDoCheck (common.js:3191)
    at callHook (core.js:3042)
    at callHooks (core.js:3008)
    at executeCheckHooks (core.js:2941)
    at refreshView (core.js:7180)
    at refreshComponent (core.js:8325)
    at refreshChildComponents (core.js:6964)
    at refreshView (core.js:7221)
    at refreshComponent (core.js:8325)
    at refreshChildComponents (core.js:6964)

--对不起，我是新手，我还不能上传图片--

但是数据在控制台中显示得很好，但我无法在我的 HTML 中检索它们。 我理解错误但似乎无法解决它，似乎无法弄清楚如何告诉 ngFor 它是一个对象数组...

Answer 1

控制台中的数据 API：

 {status: 200, data: Array(3), message: "Succesfully retrieved users"}
    data: Array(3)
    0: {_id: "5fa11db3572c6116341754c7", name: "Navarro", firstName: "Laurent", mail: "laurentnavarro@gmail.com", password: 1234, …}
    1: {_id: "5fa1386c572c6116341754c8", name: "Dupont", firstName: "Marine", mail: "marinedupond@gmail.com", password: 1234, …}
    2: {_id: "5fae7ce05780453c283b44e7", name: "Ferdinand", firstName: "Jean", mail: "Jeanferdinand@gmail.com", password: 1234, …}
    length: 3
    __proto__: Array(0)
    message: "Succesfully retrieved users"
    status: 200
    __proto__: Object

Answer 2

像这样声明你的 users 数组：users: User[] = [];