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方法

OR

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

也会这样做。

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

1 个答案: