Angular4中如何获取二次过滤后的数据长度？

首先，你遇到的Parser Error是因为Angular的模板表达式不允许包含赋值操作——ctrl.filtered = (result| filter: query)这种写法在*ngFor里完全不合法，模板只能用来展示数据，不能直接在绑定里修改组件变量。要实现二次过滤并获取条数，确实需要把过滤逻辑移到组件的.ts文件中处理，下面是具体的解决方案：

步骤1：调整组件类中的变量与过滤逻辑 #

在transaction.component.ts中，我们需要定义变量区分不同阶段的过滤结果，并编写对应的过滤方法：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-transaction',
  templateUrl: './transaction.component.html'
})
export class TransactionComponent {
  result: any[] = []; // 原始接口返回数据
  filteredResult: any[] = []; // 第一次搜索（回车/按钮）后的结果
  finalFilteredResult: any[] = []; // 二次过滤（实时输入）后的结果
  filterdata: string = ''; // 搜索框绑定的关键词
  toShowCount = false;
  arrayCount = 0;

  constructor(private http: HttpClient) {
    // 初始化获取原始数据
    this.http.post("http:...")
      .subscribe((res: any) => {
        this.result = res;
        this.toShowCount = true;
        this.arrayCount = this.result.length;
        console.log("ArrayCount = ", this.arrayCount);
        // 默认把最终结果设为原始数据
        this.finalFilteredResult = [...this.result];
      });
  }

  // 点击搜索按钮/回车时的第一次过滤
  searchByText(query: string) {
    // 根据你的数据结构编写过滤逻辑，这里假设过滤name字段
    this.filteredResult = this.result.filter(item => 
      item.name?.toLowerCase().includes(query.toLowerCase())
    );
    // 第一次过滤后，同步二次过滤结果
    this.finalFilteredResult = [...this.filteredResult];
    this.arrayCount = this.filteredResult.length;
  }

  // 输入框实时输入时的二次过滤
  onInputChange(query: string) {
    // 如果已经执行过第一次搜索，就在第一次结果上二次过滤
    if (this.filteredResult.length > 0) {
      this.finalFilteredResult = this.filteredResult.filter(item => 
        item.name?.toLowerCase().includes(query.toLowerCase())
      );
    } else {
      // 未点击搜索时，默认实时过滤原始数据（可按需调整）
      this.finalFilteredResult = this.result.filter(item => 
        item.name?.toLowerCase().includes(query.toLowerCase())
      );
    }
  }
}

步骤2：修正模板中的绑定与展示 #

在transaction.component.html中，去掉错误的赋值绑定，改为调用组件类的方法，并直接展示过滤后的结果长度：

<td style="width:50%">
  <input class="form-control" id="input1-group1" style="margin-top:20px" 
         type="text" name="search" placeholder="Enter Search Text" 
         [(ngModel)]="filterdata" 
         (keyup.enter)="searchByText(filterdata)"
         (ngModelChange)="onInputChange(filterdata)">
</td>
<td style="width:50%">
  <button type="submit" class="input-group-addon" style="margin-left:0px;width:65px;margin-top:20px" id="faIcon" 
          (click)="searchByText(filterdata)">
    &nbsp;&nbsp;&nbsp;
    <i class="fa fa-search "></i>
  </button>
</td>

<!-- 其他代码省略 -->

<div class="panel panel-default panel-transparent">
  <div class="panel-heading text-left">
    <h2> Transaction </h2>
    <label *ngIf="toShowCount" id="arrayCountId"> Number of searched data : {{arrayCount}}</label>
    <!-- 直接展示二次过滤后的结果条数 -->
    <label id="arrayCountId"> Number of filtered search data : {{finalFilteredResult.length}}</label>
    <!-- 展示二次过滤后的列表 -->
    <ul>
      <li *ngFor="let item of finalFilteredResult">
        <!-- 这里填写你要展示的item字段，比如{{item.name}} -->
      </li>
    </ul>
  </div>
</div>

为什么要这么做？ #

1. 避免模板错误：Angular模板表达式要求"无副作用"，不允许在绑定中做赋值操作，所有状态修改都应该放在组件类里。
2. 逻辑更清晰：把过滤逻辑集中在组件类中，便于维护和调试，也能灵活控制两次过滤的关联关系。
3. 轻松获取计数：直接通过finalFilteredResult.length就能拿到二次过滤后的结果条数，无需在模板中做额外计算。

内容的提问来源于stack exchange，提问作者user9630712