Api Delete Angular 5 - html

Question

Hello i'm working in Angular 5 and my api delete works (postman & site --> link = api/employees/:id --> localhost:4200/api/employees/5a2025db26589c230865527a) , but I think my HTML code is wrong or the steps in between. Can somebody help me plz i've been stuck at this all day..
HTML :
<h2>Info employees</h2>
<table class="table">
<tr>
<th>Name</th>
<th>Age</th>
<th>Email</th>
<th>Wage</th>
</tr>
<tr *ngFor="let employee of employees">
<td>{{ employee.name }}</td>
<td>{{ employee.age }}</td>
<td> {{ employee.email }} </td>
<td> {{ employee.wage}}</td>
<td>{{employee._id}}</td>
<td>
Delete
</td>
</tr>
</table>
Component.ts :
deleteEmployee(id){
var employees = this.employees;
this._dataService.deleteEmployee(id)
.subscribe(data => {
if(data.n == 1){
for(var i = 0;i < employees.length;i++){
if(employees[i]._id == id){
employees.splice(i, 1);
}
}
}
});
}
data.service :
deleteEmployee(id){
return this._http.delete('/api/employees/'+id)
.map(res => res.json());
}

Answer 1

replace data-ng-click with (click) and make the HTML element a <button> since it's not redirecting anywhere.
Edit: employees.splice(i, 1); replace with this.employees.splice(i, 1); to reflect the change in the view.
Actually, you need to change the logic of
if(data.n == 1){
for(var i = 0;i < employees.length;i++){
if(employees[i]._id == id){
employees.splice(i, 1);
}
}
}
Because basically you are deleting user in the view without considering the data of the backend service. What response do you get from that DELETE endpoint ? Does it return the deleted user or the id of the deleted user ?

Answer 2

maybe little late ..but that if you try something like this .. with .filter() ES6 (also Typescript) Array native method ..
so like:
eleteEmployee(id){
var employees = this.employees; //why use it?? ..no need it
this._dataService.deleteEmployee(id)
.subscribe(data => {
if(data.n == 1){
this.employees = this.employees.filter(xx=> xx._id != id) // <--- so filter and RETURN ALL non matching given ID
}
});
}
Hope it helps you !! ...