从 Angular 4 中删除数据后如何刷新 mfData答案

【问题标题】：How to refresh mfData in Angular 4 after removing data from it从 Angular 4 中删除数据后如何刷新 mfData
【发布时间】：2018-02-05 18:50:58
【问题描述】：

我正在使用 mfDataTable 在 UI 中表示我的数据。我在每一行都有一个按钮，用于删除该行。从组件中的数组中删除数据是有效的，但表没有刷新。我给你看我的代码，请给我一些提示，我在哪里出错，以及如何只刷新 UI 上的表格！

mfDataTable 来自：

import { DataTableModule } from "angular2-datatable";

保存修复数据的我的服务类：

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

HTML 部分，其中表格使用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>

还有组件，我在其中实现了OnChanges，但ngOnChanges 方法没有记录任何内容，并且不刷新数据表：

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

在onDeleteConfirm 方法中，日志清楚地显示删除前后，它删除了选定的代理。但不刷新表。我应该如何刷新它？谢谢！

【问题讨论】：

标签： javascript angular typescript refresh angular-datatables

【解决方案1】：

你应该清除你的收藏。在组件中使用以下内容：

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

在服务中创建 getter 方法后

或

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

也会这样做。

【讨论】：