DELETE http://localhost:3001/formations/undefined 0 () - node.js

Question

Delete function no longer works.
I deleted my information from Delete HTTP call and it works but when I used in angular2 part front end it does not work anymore.
error
DELETE http://localhost:3001/formations/undefined 0 ()
EXCEPTION: Response with status: 0 for URL: null
Subscriber.js:246 Uncaught Response {_body: ProgressEvent, status: 0, ok: false, statusText: "", headers: Headers, …}
zone.js:2019 DELETE http://localhost:3001/formations/undefined 0 ()
this is my formation.Service
deleteFormation(id){
return this.http.delete("http://localhost:3001/formations/"+id)
.map(res => res.json());
}
this is my home.ts
import { Component, OnInit } from '#angular/core';
import { FormationService } from '../../services/formation.service';
import { Formation } from '../../../app/formation';
import {Observable} from 'rxjs/Rx';
#Component({
selector: 'app-home1',
templateUrl: './home1.component.html',
styleUrls: ['./home1.component.css']
})
export class Home1Component implements OnInit {
formation: Observable<Formation[]>;
constructor(
public formationService:FormationService
) { };
ngOnInit() {
this.formation = this.formationService.getFormations();
// this.getFormations();
}
getFormations(){
this.formationService.getFormations()
.subscribe(formation=>{
this.formation = this.formation;
})
}
deleteFormation(id) {
this.formationService.deleteFormation(id)
.subscribe(()=>{
this.getFormations();
});
}
}
this my home.html
<app-navbar1></app-navbar1>
<table class="table table-bordered">
<thead>
<tr>
<td><b>Title</b></td>
<td><b>url</b></td>
<td><b>description</b></td>
<td width="275" align="center"><b>Action</b></td>
</tr>
</thead>
<tbody>
<tr *ngFor="let forms of formation | async " >
<td>{{forms.title}}</td>
<td>{{forms.url}}</td>
<td>{{forms.description}}</td>
<td width="275">
<a class="btn btn-info" routerLink="/show/{{formation._id}}">Detail</a>
<a class="btn btn-success" routerLink="/edit/{{formation._id}}" >Edit</a>
<a class="btn btn-danger" (click)="deleteFormation(formation._id)" >Delete</a>
</td>
</tr>
</tbody>
</table>

Answer 1

The problem with your code is that you are enumerating over a collection in *ngFor and instead of passing an instance of an object to deleteFormation method, you are passing collection.
Instead of deleteFormation(formation._id) you need to call deleteFormation(forms._id). _id does not exist on your formation array.
The same problem applies to your Detail and Edit links.