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

标签 javascript angular typescript filter emit

我有分页表。我构建了一个函数来获取对象并对其进行过滤,然后在表中显示结果。

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

这是我的代码和排序函数:

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>

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

最佳答案

您只为数据使用了一个变量 (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);
  }

关于javascript - 从表工作中过滤数据但再次搜索后没有发现任何内容 [Angular,Pagination,Table],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57784337/

相关文章:

javascript - DefinitelyTyped 与打字——比较

typescript - Chutzpah 找不到变量

javascript - 将 promise 返回的值推送到数组中

javascript - 尝试在 Angular 客户端显示数据

javascript - 获取任何地区或城市内的所有邮政编码

angular - NPM 脚本 Webpack --json : JavaScript heap out of memory

javascript - Angular - Apollo : Client has not been defined yet

javascript - 如何使用 jQuery 在 <a> 中插入 <image>?

javascript - 为什么我的自定义验证器不会触发?

javascript - 使用 editgridrow 添加 POST 数据