Angular：尝试与'[object Object]'进行比较时出错。仅允许数组和可迭代的对象

Posted 2023-02-17

我知道了Error trying to diff '[object Object]'. Only arrays and iterables are allowed当我尝试获取更新的数据时出现此错误

获取代码：

allDatas
  allData(data) 
    this.allDatas = data
  

好的，这是我编写的更新代码：

updateTodo(currentTodo)  
       // console.log(currentTodo)
        this._todo.updateTask(currentTodo).subscribe(
          data=>console.log(data);this.allData(data),
          error=>console.log(error)
        )
  

此请求来自Service.ts

updateTask(todo:TodoModel):Observable<TodoModel>
    return this._http.put<TodoModel>('http://127.0.0.1:3000/todo/updateTodo/'+todo.id,todo,headerOption)
  

我使用cosole.log检查了所有内容，最后我得到了出现错误的行，让我向您展示

updateTodo(currentTodo)  
           // console.log(currentTodo)
            this._todo.updateTask(currentTodo).subscribe(
              data=>console.log(data);this.allData(data), //Error Comes from this line----------
              error=>console.log(error)
            )
      

这是相同的更新代码：当我在更新代码中写入data=>console.log(data)时，不再显示错误，但是当我使用data=>console.log(data);this.allData(data)时出现此错误：

html：我在其中绑定数据的地方：

<tbody *ngFor="let t of allDatas;let i= index">
                <tr class="table-success" *ngIf="t && t.complited">
                    <td>t.task</td>
                    <td>t.date.year+"-"+t.date.month+"-"+t.date.day</td>
                    <td> t.complited</td>
                    <td>
                        <i class="fa fa-times-circle btn idelete" style="font-size:25px;" (click)="putTrue(t)"></i>
                        <i class="fa fa-edit btn iedit" style="font-size:25px;color:rgb(31, 12, 12)" (click)="editTodo(t)"></i>
                        <i class="fa fa-trash-o btn idelete" style="font-size:25px;" (click)="deleteTask(t.id)"></i>
                    </td>
                </tr>
                <tr class="table-danger" *ngIf="t && !t.complited">
                    <td>t.task</td>
                    <td>t.date.year+"-"+t.date.month+"-"+t.date.day</td>
                    <td> t.complited</td>
                    <td>
                        <i class="fa fa-check-circle btn idone" style="font-size:25px;" (click)="putTrue(t)"></i>
                        <i class="fa fa-edit btn iedit" style="font-size:25px;color:rgb(31, 12, 12)" (click)="editTodo(t)"></i>
                        <i class="fa fa-trash-o btn idelete" style="font-size:25px;" (click)="deleteTask(t.id)"></i>
                    </td>
                </tr>
            </tbody>

所以allDatas是一个数组：

JSON数据：执行所有操作的位置

["id":29,"task":"random 5","date":"year":2020,"month":5,"day":9,"category":"genral","complited":false,null,"id":31,"task":"task 32","date":"year":2020,"month":5,"day":31,"category":"genral","complited":false]

简而言之，当我更新任务并获取更新的任务时出现错误，但是我使用相同的方法发布其他数据，因此得到了理想的结果请有人帮我，我试图解决这个错误已经很长时间了...

答案

尝试初始化所有数据：this.allDatas=[]

updateTodo(currentTodo)  
          // console.log(currentTodo)
            this._todo.updateTask(currentTodo).subscribe(
              data=>console.log(data);
               this.allDatas.push(data)


            )
      

但是最好的解决方案是将API的返回类型更改为数组[]

另一答案

从我的代码中可以理解，由于在allData方法中将对象分配给数组，因此出现了错误。>

在订阅PUT请求中，您收到一个对象而不是一个数组。

这是allData方法的外观：

allData(data) 
 this.allDatas.push(data);

另一答案

此错误与您的html文件中的“ * ngFor”循环有关。它基本上说“ allDatas”不是数组。