Angular: Ошибка при попытке изменить '[объект объекта]'. Разрешены только массивы и итерации

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 - это массив A:

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 refre sh и 'allDatas' равно 'data'.
, если вы используете this.allDatas.pu sh (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

Из того, что я могу понять из вашего кода, вы получаете ошибку, потому что вы присваиваете объект массиву методом allData.

При подписке запроса PUT вы получаете объект и не массив.

Вот как должен выглядеть ваш allData метод:

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

Answer 3

Эта ошибка связана с *ngFor l oop в вашем файле html. в основном это говорит о том, что allDatas не является массивом.

Проверьте тип allDatas, используя "typeof", убедитесь, что это массив.

РЕДАКТИРОВАТЬ
Я видел второе изображение, и оно выглядит как массив.
Пожалуйста, попробуйте также проверить этот массив с помощью онлайн-инструмента проверки. 1022 * валидатор.

Также переместите *ngFor l oop из <tbody> в <tr>

удачи

Answer 4

Попробуйте инициализировать allDatas: this.allDatas=[]

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

            )
      }

Но лучшее решение - изменить тип возвращаемого значения вашего API на массив []