I have integrated mfDataTable into my UI to display data in a tabular format. Each row in the table has a button that allows users to remove the corresponding row. While I am able to successfully remove the data from the array in the component, the table does not refresh automatically. Below is the relevant code snippet where I request your guidance on identifying any errors and refreshing only the table on the UI:
The usage of mfDataTable is included below:
import { DataTableModule } from "angular2-datatable";
Here's the Service class containing fixed data:
@Injectable()
export class AgentsService {
agentsData = [{
'id': 1,
'agentCountry': 40,
'agentName': 'New Agent',
'agentNumber': 246
},
{...more agents...}
];
removeAgentByAgentId(agent: any): void {
let index: number = this.agentsData.indexOf(agent);
if (index !== -1) {
this.agentsData.splice(index, 1);
}
}
}
This snippet demonstrates the HTML part defining the table using mfDataTable:
<table class="table table-striped" [mfData]="agentsData | agentsDataFilterByCountry : filterByCountry" #mf="mfDataTable" [mfRowsOnPage]="rowsOnPage"
[(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
<thead>
<tr>
<th style="width: 15%">Actions</th>
<th style="width: 20%">
<mfDefaultSorter by="agentName">Name</mfDefaultSorter>
</th>
<th style="width: 5%">
<mfDefaultSorter by="agentNumber">Number</mfDefaultSorter>
</th>
<th style="width: 10%">
<mfDefaultSorter by="agentCountry">Country</mfDefaultSorter>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let agent of mf.data; let i = index" [attr.data-index]="i">
<td>
<button (click)="onDeleteConfirm(agent)" class="btn btn-danger ion-trash-a"></button>
</td>
<td>{{agent.agentName}}</td>
<td>{{agent.agentNumber}}</td>
<td>{{agent.agentCountry}}</td>
</tr>
</tbody>
</table>
In the Component, I have implemented the OnChanges but I am not receiving any logs from the ngOnChanges method, which indicates that the data table is not being refreshed:
import { Component, OnInit, OnChanges, SimpleChange, Input } from '@angular/core';
import { AgentsService } from '../../services/agents/agents.service';
@Component({
selector: 'app-agents',
templateUrl: './agents.component.html',
styleUrls: ['./agents.component.scss']
})
export class AgentsComponent implements OnInit, OnChanges {
private service: AgentsService;
agentsData: Array<any>;
filterByCountry = "40";
rowsOnPage = 10;
sortBy = "agentName";
sortOrder = "asc";
constructor(service: AgentsService) {
this.service = service;
this.agentsData = service.agentsData;
}
ngOnInit() {
}
ngOnChanges(changes: {[propKey: string]: SimpleChange}) {
console.log("something changed");//not logging anything... :(
}
onDeleteConfirm(agent: any): void {
if (window.confirm('Are you sure you want to delete?')) {
console.log("agentsData before remove: "+this.agentsData.length);
this.service.removeAgentByAgentId(agent);
this.agentsData = service.agentsData;
console.log("agentsData after remove: "+this.agentsData.length);
}
}
}
Although the log within the onDeleteConfirm method confirms successful removal of the selected agent, the table is not refreshed accordingly. Could you provide guidance on how to trigger a refresh? Thank you!