javascript - Angular : Error trying to diff '[object Object]' . 只允许数组和迭代

标签 javascript angular typescript


我知道了 尝试区分“[object Object]”时出错。只允许数组和可迭代对象 当我尝试获取更新数据时出现此错误

获取代码:

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)} 我得到这个错误:

Error

HTML:我绑定(bind)数据的地方:

<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 是一个数组:

enter image description here

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}]


所以简而言之,我在更新任务和获取更新任务时遇到了错误,但我使用相同的方法来发布其他数据,我得到了完美的结果
请有人帮助我,因为很长一段时间以来我一直在努力解决这个错误......

最佳答案

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

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

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

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

关于javascript - Angular : Error trying to diff '[object Object]' . 只允许数组和迭代,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61534222/

相关文章:

Angular 2.5如何在路由参数中传递/

angular - TS7016 : Could not find a declaration file for module 'rxjs'

typescript - 如何为 GraphQL 联合编写通用 TypeGuard?

javascript - HTML5、文件 API 和 jQuery 发布图片

Angular 2图像src作为函数返回

javascript - 将字符串解析为值 - 计算

angular - 订阅在服务中意外取消(来自扩展路由组件)

typescript - 在 Typescript 中创建 `toFunc` 泛型方法?

javascript - AngularJS — Ng 重复数组对象

javascript - 选择并删除所有匹配的数据属性