title: How to fix my 'delete' button angular [routerLink] error
body: <p>I recently added a simple delete button to my <code>homepage.html</code> using:</p>
  
  <pre><code>&lt;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)"&gt;Delete&lt;/button&gt;
  </code></pre>
  
  <p>I am getting the console error:</p>
  
  <blockquote>
    <p>HomePageComponent.html:96 ERROR Error: Error trying to diff '[object
    Object]'. Only arrays and iterables are allowed</p>
  </blockquote>
  
  <p>I'm being told this is on line 96 of my html, this is that line</p>
  
  <pre><code>&lt;tr *ngFor="let cat of cats"&gt;
  &lt;td&gt;{{cat.breedname}}&lt;/td&gt;
  &lt;td&gt;{{cat.age}}&lt;/td&gt;
  &lt;td&gt;{{cat.gender}}&lt;/td&gt;
  &lt;td&gt;{{cat.comfortablecatdog}}&lt;/td&gt;
  &lt;td&gt;{{cat.comfortablekids}}&lt;/td&gt;
  &lt;td&gt;{{cat.health}}&lt;/td&gt;
  &lt;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]"&gt;Details&lt;/button&gt;
      &lt;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']"&gt;Edit&lt;/button&gt;
      &lt;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)"&gt;Delete&lt;/button&gt;
    &lt;/tr&gt;
  </code></pre>
  
  <p>This is my <code>homepage.ts</code>:</p>
  
  <pre><code>removeCat(_id) {
  var tempObeservable = this._httpService.removeCatById(_id);
  tempObeservable.subscribe((data: any) =&gt; {
    console.log('got a response from delete');
    var tempObeservable = this._httpService.getAllPets();
    tempObeservable.subscribe((data: any) =&gt; {
      console.log('got a response from ngoninit', data);
      this.cats = data;
    })
  })
  </code></pre>
  
  <p>}</p>
  
  <p>This is my http.service.ts</p>
  
  <pre><code>    removeCatById(_id){
      console.log('deleteDog', _id);
      return this._http.delete(`/api/pets/${_id}/deletecat`, _id);
    }
  </code></pre>
  
  <p>This is my app-routing.module.ts </p>
  
  <pre><code>    {path: 'cats/:id/deletecat', component: HomePageComponent},
  </code></pre>
  
  <p>This is my routers.js</p>
  
  <pre><code>      app.delete('/api/pets/:id/deletecat', pets.deleteCat);
  </code></pre>
  
  <p>And this is my pets.js controller</p>
  
  <pre><code>      deleteCat: (req, res) =&gt; {
          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' });
              }
          })
      }
  </code></pre>
  
  <p>My other buttons work fine, the 'edit' and 'details', however those are using [routerLink]'s instead of my (click) function. None of the answers I found online seemed to have helped. I'd be happy to provide more code if I didn't supply enough.</p>
  
  <p>Thank you.</p>
  
  <p>[edit]
  I should mention the button will still delete the proper object but only display after I refresh the page.</p>