Error: Cannot find a differ supporting object '[object Object]'

Question

我正在尝试创建我的第一个 MEAN 堆栈来执行应用程序，但卡住了。试图找出如何在 html 中显示我的数据，但不确定如何更改我从服务器获得的响应，以便我的 *ngFor 可以显示数据。

我确定我的错误出在 getList() 或 getAllTodos() 函数中。我试过添加

.map(response => response.json().todos)

到 getAllTodos() 函数，但由于 Http 模块更新为 angular 4.

的 HttpClient 模块，我得到了 "res.json is not a function" 错误

我使用 REST 客户端从服务器测试了我的路由，我知道我得到了正确的响应，即：

{
"success": true,
"todos":
  {
"_id": "5b0dc32d1f6fa0f48ca7d374",
"item": "test",
"completed": false,
"__v": 0
},
  {
"_id": "5b0dc3b11f6fa0f48ca7d375",
"item": "1234",
"completed": false,
"__v": 0
},
  {
"_id": "5b0dc4ae1f6fa0f48ca7d376",
..........

dashboard.component.ts

export class DashboardComponent implements OnInit {
  user: Object;

  lists: List[];

  @Input() input;

  @Output() update = new EventEmitter();

  constructor(
    private authService: AuthService,
    private flashMessage: FlashMessagesService,
    private listService: ListService
  ) { }

  ngOnInit() {
    this.getLists();

    this.authService.getProfile().subscribe(profile => {
      this.user = profile.user;
    },
    err => {
      console.log(err);
      return false;
    });
  }

  getLists(): void {
    this.listService.getAllTodos()
      .subscribe(list => this.lists = list);
  }

list.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';

import { List } from '../list';

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable()
export class ListService {
  newTodo: any;

  constructor(private http: HttpClient) { }

  getAllTodos(): Observable<List[]> {
    return this.http.get<List[]>('http://localhost:3000/todos/lists')
  }

Answer 1

你的回复是一个对象，你需要赋值todos

 this.listService.getAllTodos()
      .subscribe(list => this.lists = list.todos);

Answer 2

响应数组不是有效的 JSON 值。 todos 应该是一个数组。响应应如下所示： { "success": true, "todos": [{ "_id": "5b0dc32d1f6fa0f48ca7d374", "item": "test", "completed": false, "__v": 0 }, { "_id": "5b0dc3b11f6fa0f48ca7d375", "item": "1234", "completed": false, "__v": 0 }]

Error: Cannot find a differ supporting object '[object Object]'

Error: Cannot find a differ supporting object '[object Object]'

mean-stack

angular