NgFor 仅支持绑定到 Iterables，例如 Arrays.Cannot find differ supporting Object

Question

我在网站上发现了很多关于同一问题的链接。但我无法解决它。不好意思又问这种问题

在我的项目中，我想遍历任务并显示它。我从 backend.I 获取这些任务，我能够通过控制台查看任务，但无法在网页中查看，因为它给出了错误。我尝试在 ngFor 中使用 'keyvalue'，但是当我使用时没有显示任何内容。

task.service.ts

get_tasks():Observable<Task>{
    return this.http.get<Task>('http://localhost:3000/tasks/');
  }

  createTask(task:Task){
    console.log(task);
    return this.http.post('http://localhost:3000/tasks/',task);
  }

  deleteTask(id){
    return this.http.delete('http://localhost:3000/tasks/'+id);
  }

  updateTask(task){
    return this.http.put('http://localhost:3000/tasks/'+task.id,task).pipe(map(res=>{
      console.log(res);
      }));
  }

tasks.component.ts

ngOnInit(){
    this.getTasksList();
  }

  getTasksList(){
    this.taskService.get_tasks().subscribe((task:any)=>{
      this.tasksList=task;
      console.log(this.tasksList);
    })

  }

  newTasks(event){
    event.preventDefault();
    var newList={
      _id:this.id,
      title:this.title,
      isDone:false
    }
    this.taskService.createTask(newList).subscribe((task:any)=>{
      this.tasksList.push(task);
      this.title='';
    })

  }

  removeTask(id){
    var tasks=this.tasksList;
    this.taskService.deleteTask(id).subscribe((data)=>{
      for(var i=0;i<tasks.length;i++){
        if(tasks[i]._id=id){
          tasks.splice(i,1);
        }
      }
    })

  }

task.component.html

<div class="tasks">
  <div class="tasks-list" *ngFor="let task of tasksList">
    <div class="col-md-1">
      <input type="checkbox">
    </div>
    <div class="col-md-7">
      {{task.title }}


</div>

哪里做错了？？是不是类型？？谁能解释一下哪里做错了。

Answer 1

后端似乎正在 return 使用属性中包含的数组创建一个名为 data 的对象。

选项 1：您可以在控制器中分配它而不更改模板

控制器

getTasksList(){
  this.taskService.get_tasks().subscribe((task:any) => {
    this.tasksList = task['data'];
    console.log(this.tasksList);
  });
}

模板

<div class="tasks">
  <div class="tasks-list" *ngFor="let task of tasksList">
    <div class="col-md-1">
      <input type="checkbox">
    </div>
    <div class="col-md-7">
      {{ task?.title }}
    </div>
  </div>
</div>

选项2：或者不更改控制器，访问模板中的属性

getTasksList(){
  this.taskService.get_tasks().subscribe((task:any) => {
    this.tasksList = task;
    console.log(this.tasksList);
  });
}

模板

<div class="tasks">
  <div class="tasks-list" *ngFor="let task of tasksList?.data">
    <div class="col-md-1">
      <input type="checkbox">
    </div>
    <div class="col-md-7">
      {{ task?.title }}
    </div>
  </div>
</div>

方案3：或者如果可以调整后端，保持front-end代码不变，将后端调整为return数组[{}, {},...] 而不是对象 {data: [{}, {},...]}.

NgFor 仅支持绑定到 Iterables，例如 Arrays.Cannot find differ supporting Object

NgFor only supports binding to Iterables such as Arrays.Cannot find differ supporting Object

node.js

angular

mongodb

observable

ngfor