Delete Row in angular - html

Question

<tr *ngFor="let upload of uploads; let i = index">
<td title="{{upload.documentName}}" class="first_col">{{upload.documentName}}</td>
<td>{{upload.inputDocumentPassword}}</td>
<td class="third_col">{{upload.documentFormat}}</td>
<td>{{upload.uploadTime|date }} <br><span class="time">{{upload.uploadTime|date :'shortTime' }}</span>
</td>
<td>{{upload.approvalStatus}}</td>
<td>
<div class="Action">
<i class="material-icons md-get_app" (click)="downloadOutput(upload)">get_app</i>
<i class="material-icons md-visibility">visibility</i>
<i class="material-icons md-picture_as_pdf" (click)="downloadpdf(upload)">picture_as_pdf</i>
<i class="material-icons md-delete"
(click)="fileToDelete(upload.documentName)" onclick="document.getElementById('id01').style.display='block'" >delete</i>
<div id="id01" class="w3-modal">
<div class="w3-container w3-teal">
<div class="Inner-tab">
<div class="tittle-box">
<label class="warning">WARNING</label>
</div>
<div class="are-you-sure-message">
<span>Are you sure you want to delete "{{documenttoDelete}}" file ?</span>
</div>
<div class="btn-tab">
<button class="cancle" onclick="document.getElementById('id01').style.display='none'">CANCEL</button>
<button class="yes" (click)="delete(upload)" (click)="reload()" >YES</button>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
When I'm trying to delete any row on the page, whichever row I click only 1st row is getting deleted!! I think there is some problem with the loop! Any help would be highly appreciated!
this is my .ts function
delete(userActivity) {
this.baseService.delete(environment.restPath+'file', userActivity.id).subscribe(
(data) => {
this.getPageItems();
})
console.log(event);
}
getPageItems():void{
this.baseService.getData(environment.restPath+'file/list/page/'+ this.pageNum+ '?thisUserOnly=true').subscribe(
(data) => {
this.total = data.result.totalCount;
this.userActivityList = [];
this.userActivityList = data.result.list;
})
}

Answer 1

call it like :-
<button class="yes" (click)="delete(i);reload()" >YES</button>
In Typescript :-
delete(userActivity) {
this.baseService.delete(environment.restPath+'file', userActivity.id).subscribe(
(data) => {
this.getPageItems();
this.uploads = this.uploads.filter((upload)=> upload.id !== userActivity.id);
})
console.log(event);
}