如何在 Angular 4 中删除数据后刷新 mfData

Question

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

上的 table

mfDataTable 来自：

import { DataTableModule } from "angular2-datatable";

我的服务 class，其中包含修复数据：

@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 部分，其中 table 定义为 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 方法中记录任何内容，并且不刷新数据 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);
    }
  }
}

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

Answer 1

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

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

在您的服务中创建 getter 方法后

或

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

也会这样做。

如何在 Angular 4 中删除数据后刷新 mfData

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

javascript

angular

typescript

refresh

angular-datatables