javascript - 从表工作中过滤数据但再次搜索后没有发现任何内容 [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);
  }