How to refresh mfData in Angular 4 after removing data from it

Question

I am using the mfDataTable to represent my data in the UI. I have a button on each row, to remove the row. Removing the data from the array in the component is working, but the table does not refresh. I show you my code, please give me some hints where I do mistakes, and how to refresh only the table on the UI!

The mfDataTable is coming from:

import { DataTableModule } from "angular2-datatable";

My Service class, which holds the fix 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);
    }
  }
}

The HTML part, where the table is defined with 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>

And the Component, where I implement the OnChanges but nothing is logged from the ngOnChanges method, and does not refresh the data table:

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);
    }
  }
}

In the onDeleteConfirm method the log show clearly before and after the removing, that it removes the selected agent. But does not refresh the table. How should I refresh it? Thanks!

Answer 1

You should clear you collection. Use the following in the component:

this.agentsData = new Array<any>();
this.agentsData = this.service.getAgentData();

after you created a getter method in your service

OR

this.agentsData = new Array<any>();
this.agentsData = this.agentsData.concat(this.service.agentsData);

will do the same.