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

Question

我使用 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方法中，日志清楚地显示删除之前和之后，它删除了选定的代理。但不刷新表。我应该如何刷新它？谢谢!

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

也会做同样的事情。