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。

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

然后您应该在整个代码中使用新变量（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);
  }

从表格工作中过滤数据，但再次搜索后未找到任何内容[Angular，Pagination，Table]

1 个答案: