时间戳

首页 > 解决方案 > NgFor 仅支持绑定到诸如 Arrays 之类的 Iterables。找不到不同的支持对象

node.js - NgFor 仅支持绑定到诸如 Arrays 之类的 Iterables。找不到不同的支持对象

问题描述

我在网站上遇到了很多关于同一问题的链接。但我无法解决。我很抱歉再次问这种类型的问题。

在我的项目中，我想遍历任务并显示它。我正在从后端获取这些任务。我可以通过控制台查看任务，但无法在网页中查看，因为它给出了错误。我尝试在 ngFor 中使用 'keyvalue'，但是当我不使用任何东西时，没有显示。

任务服务.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);
      }));
  }

任务.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>

哪里做错了？是类型吗？谁能解释我在哪里做错了。 在此处输入图像描述

标签： node.jsangularmongodbobservablengfor

解决方案

看起来后端正在返回一个对象，该对象的数组包含在名为 的属性中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: [{}, {},...]}。

推荐阅读