Angular：尝试区分“[object Object]”时出错。只允许使用数组和可迭代对象

Question

我知道了 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}]

总之，当我更新任务和获取更新任务时出现错误，但我使用相同的方法发布其他数据，我得到了完美的结果
请有人帮助我，我一直在尝试解决这个错误......

Answer 1

试试这个
如果你使用 this.allDatas = data; allDatas 刷新并且 'allDatas' 等于 'data'。
如果你使用 this.allDatas.push(data);新添加到“allDatas”中的“数据”

首先创建一个数组 allDatas : Array = [];

   allDatas : Array<any> = [];

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

Answer 2

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

使用“typeof”验证allDatas 的类型，确保它是一个数组。

编辑
我看到了第二张图片，它看起来像是一个数组。
还请尝试使用在线验证工具验证该数组。在 Google 中搜索 json 验证器。

还将*ngFor 循环从<tbody> 移动到<tr>

祝你好运

Answer 3

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

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

            )
      }

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

Answer 4

根据我从您的代码中了解到的情况，您收到错误是因为您在 allData 方法中将对象分配给数组。

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

这就是您的 allData 方法的样子：

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