Как исправить мою угловую ошибку [delete] [routerLink]

Question

Недавно я добавил простую кнопку удаления в homepage.html, используя:

<button style="border: 1.5px solid rgba(255, 0, 0, 0.226); background- 
color: whitesmoke; border-radius: 23px; font-size: 15px; padding: 5px; 
margin: 5px;"
(click)="removeCat(cat._id)">Delete</button>

Я получаю сообщение об ошибке консоли:

HomePageComponent.html: 96 Ошибка ОШИБКИ:Ошибка при попытке diff '[object Object]'.Разрешены только массивы и итерации

Мне сказали, что это в строке 96 моего html, это строка

<tr *ngFor="let cat of cats">
<td>{{cat.breedname}}</td>
<td>{{cat.age}}</td>
<td>{{cat.gender}}</td>
<td>{{cat.comfortablecatdog}}</td>
<td>{{cat.comfortablekids}}</td>
<td>{{cat.health}}</td>
<button
  style="border: 1.5px solid rgba(0, 164, 240, 0.267); background-color: whitesmoke; border-radius: 23px; font-size: 15px; padding: 5px; margin: 5px;"
      [routerLink]="['/cats', cat._id]">Details</button>
    <button
      style="border: 1.5px solid rgba(255, 217, 0, 0.267); background-color: whitesmoke; border-radius: 23px; font-size: 15px; padding: 5px; margin: 5px;"
      [routerLink]="['/cats', cat._id, 'edit']">Edit</button>
    <button style="border: 1.5px solid rgba(255, 0, 0, 0.226); background-color: whitesmoke; border-radius: 23px; font-size: 15px; padding: 5px; margin: 5px;"
    (click)="removeCat(cat._id)">Delete</button>
  </tr>

Это мой homepage.ts:

removeCat(_id) {
var tempObeservable = this._httpService.removeCatById(_id);
tempObeservable.subscribe((data: any) => {
  console.log('got a response from delete');
  var tempObeservable = this._httpService.getAllPets();
  tempObeservable.subscribe((data: any) => {
    console.log('got a response from ngoninit', data);
    this.cats = data;
  })
})

}

Это мой http.service.ts

    removeCatById(_id){
    console.log('deleteDog', _id);
    return this._http.delete(`/api/pets/${_id}/deletecat`, _id);
  }

Это мой app-routing.module.ts

    {path: 'cats/:id/deletecat', component: HomePageComponent},

Это мой routers.js

      app.delete('/api/pets/:id/deletecat', pets.deleteCat);

А это мой контроллер pets.js

      deleteCat: (req, res) => {
        Cat.deleteOne({ _id: req.params.id }, function (err) {
            if (err) {
                console.log("hit delete but got errors", err);
                res.json(err);
            } else {
                res.json({ message: 'succesfully deleted' });
            }
        })
    }

Мои другие кнопки работают нормально, 'edit' и 'details', однако теиспользуют функцию [routerLink] вместо функции my (click).Ни один из ответов, которые я нашел в Интернете, похоже, не помог.Я был бы рад предоставить больше кода, если я не предоставил достаточно.

Спасибо.

[править] Я должен отметить, что кнопка все равно удалит нужный объект, но будет отображаться только послеЯ обновляю страницу.