从表格工作中过滤数据，但再次搜索后没有发现任何内容 [Angular,Pagination,Table]

Question

我有分页表。 我构建了一个函数，该函数接受对象并对其进行过滤，然后在表中显示结果。

问题是当我再次搜索时，对象中的旧数据在第一次搜索中被删除，而当我再次搜索时没有找到我。

这是我的代码和我的排序功能：

export class TaxreportsComponent implements OnInit {

  public taxList: Array<Tax>;
  public page: number;
  public currentPage: Array<Tax>;
  public totalItems: number;

  constructor(private service: CompanyService) {
    this.totalItems = 0;
    this.currentPage = [];
    this.taxList = [];
    this.page = 1;
  }
  ngOnInit() {
    this.service.getTaxList((data) => this.onGetTaxList(data));
  }
  onGetTaxList(data) {
    this.taxList = data;
    this.currentPage = this.taxList.slice(0, 10);
    this.totalItems = this.taxList.length;
  }
  pageChanged(event) {
    const startItem = (event.page - 1) * event.itemsPerPage;
    const endItem = event.page * event.itemsPerPage;
    this.currentPage = this.taxList.slice(startItem, endItem);
  }

// Sort the data and change the table
  sort(searchWord) {
    const data = this.taxList.filter(item => {
      return item.type === searchWord;
    });
    this.onGetTaxList(data);
  }

这是我的 html：

<app-home-menu (filteEvent)="sort($event)" ></app-home-menu>
<div class="table-container">
  <table class="table">
    <thead>
      <tr class="table-nav">
        <th scope="col">Year</th>
        <th scope="col">Type</th>
        <th scope="col">HP</th>
        <th scope="col">CompanyName</th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let tax of currentPage">
        <tr>
          <td>{{tax.year}}</td>
          <td>{{tax.type}}</td>
          <td>{{tax.cid}}</td>
          <td>{{tax.company}}</td>
        </tr>
      </ng-container>
    </tbody>
  </table>
  <div class="table-footer">
  <pagination class="pagination" nextText=">" previousText="<"  [totalItems]="totalItems" (pageChanged)="pageChanged($event)"> </pagination>
</div>
</div>

我需要为每次搜索找到一种方法，即首先初始化原始对象然后再次搜索

Answer 1

您只使用一个变量 ( taxList ) 作为数据。 当您从服务中获取实际数据时，您可以对其进行设置。 当你过滤它时，你再次设置它。 所以实际数据会丢失。

您可以改为为过滤数据引入另一个变量 ( filteredTaxList )。

现在，在第一个，当你从服务中获得的实际数据，你应该把它存放在taxList ，并设置filteredTaxList它。

然后，当您更改过滤器时，您从taxList设置filteredTaxList 。

那么你应该在整个代码中使用新变量（ filteredTaxList ），比如分页等。

export class TaxreportsComponent implements OnInit {

  public taxList: Array<Tax>;
  public filteredList: Array<Tax>;
  public page: number;
  public currentPage: Array<Tax>;
  public totalItems: number;

  constructor(private service: CompanyService) {
    this.totalItems = 0;
    this.currentPage = [];
    this.taxList = [];
    this.filteredList= [];
    this.page = 1;
  }
  ngOnInit() {
    this.service.getTaxList((data) => this.onGetTaxList(data, true));
  }
  onGetTaxList(data, isOriginal) {
    if(isOriginal) this.taxList = data;
    this.filteredtaxList = data;
    this.currentPage = this.filteredtaxList.slice(0, 10);
    this.totalItems = this.filteredtaxList.length;
  }
  pageChanged(event) {
    const startItem = (event.page - 1) * event.itemsPerPage;
    const endItem = event.page * event.itemsPerPage;
    this.currentPage = this.filteredTaxList.slice(startItem, endItem);
  }

// Sort the data and change the table
  sort(searchWord) {
    const data = this.taxList.filter(item => {
      return item.type === searchWord;
    });
    this.onGetTaxList(data, false);
  }