NgFor仅支持绑定到数组等Iterables，找不到支持的对象

Question

我在网站上遇到了很多有关同一问题的链接。但是我无法解决。很抱歉再次提出此类问题。

在我的项目中，我想遍历任务并显示它。我正在从后端获取这些任务。我可以通过控制台查看任务，但无法在网页中查看，因为这会导致错误。我曾尝试在ngFor中使用“键值”，但在不使用任何内容时都无法显示。

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

看来后端正在返回一个对象，该对象包含名为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：或，如果可以调整后端，请保持前端代码不变，并调整后端以返回数组[{}, {},...]而不是对象{data: [{}, {},...]}