Angular 5 如何按type字段筛选数据实现分块数据绑定？

当然可以实现按type字段筛选数据并分块展示的需求！你之前的*ngFor写法是错误的——let关键字在*ngFor里只能用来定义循环的局部变量（比如索引let i = index），不能直接用来筛选数据。下面给你两种简单靠谱的实现方案：

方案一：组件内预处理数据（推荐，性能更优） #

这种方法会在数据获取后直接筛选出你需要的分组数据，后续模板直接使用筛选后的数组即可，避免重复计算。

修改TS组件代码 #

在组件里新增两个属性来存储不同类型的错误数据，然后在订阅接口返回数据时，用数组的filter方法完成筛选：

import { Component, OnInit } from '@angular/core';
import { ErrorsService } from './errors.service'; 

@Component({
  selector: 'app-errors',
  templateUrl: './errors.component.html',
  styleUrls: ['./errors.component.css'],
})
export class ErrorsComponent implements OnInit {
  data: any = [];
  // 存储连接错误数据
  connectionErrors: any[] = [];
  // 存储请求错误数据
  requestErrors: any[] = [];

  constructor(private errorsService: ErrorsService) { }

  ngOnInit() {
    this.errorsService.getAllErrors().subscribe(responseData => {
      this.data = responseData;
      // 筛选type包含'connection error'的数据（精确匹配用 === 替代 includes）
      this.connectionErrors = this.data.data.filter(item => item.type.includes('connection error'));
      // 筛选type包含'request error'的数据
      this.requestErrors = this.data.data.filter(item => item.type.includes('request error'));
    });
  }
}

修改HTML模板 #

直接针对筛选后的数组循环展示：

<!-- 连接错误区块 -->
<div class="error-group">
  <h3>Connection Errors</h3>
  <div *ngFor="let error of connectionErrors" class="error-item">
    <p>ID: {{error.id}}</p>
    <p>Message: {{error.message}}</p>
  </div>
</div>

<!-- 请求错误区块 -->
<div class="error-group">
  <h3>Request Errors</h3>
  <div *ngFor="let error of requestErrors" class="error-item">
    <p>ID: {{error.id}}</p>
    <p>Message: {{error.message}}</p>
  </div>
</div>

方案二：自定义筛选管道（适合复用场景） #

如果你的筛选逻辑需要在多个组件中复用，可以自定义一个Angular管道来实现筛选功能。

1. 创建自定义管道 #

新建filter-by-type.pipe.ts文件：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filterByType'
})
export class FilterByTypePipe implements PipeTransform {
  // 第一个参数是要筛选的数组，第二个参数是目标type字符串
  transform(items: any[], targetType: string): any[] {
    // 边界处理：如果数组为空或目标type为空，返回原数组
    if (!items || !targetType) return [];
    // 执行筛选（精确匹配用 ===，包含匹配用 includes）
    return items.filter(item => item.type.includes(targetType));
  }
}

2. 在模块中声明管道 #

在你的组件所属的模块（比如ErrorsModule）中导入并声明这个管道：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ErrorsComponent } from './errors.component';
import { FilterByTypePipe } from './filter-by-type.pipe';

@NgModule({
  declarations: [
    ErrorsComponent,
    FilterByTypePipe // 声明自定义管道
  ],
  imports: [
    CommonModule
  ]
})
export class ErrorsModule { }

3. 在模板中使用管道 #

直接在*ngFor中通过管道筛选数据：

<!-- 连接错误区块 -->
<div class="error-group">
  <h3>Connection Errors</h3>
  <div *ngFor="let error of data.data | filterByType: 'connection error'" class="error-item">
    <p>ID: {{error.id}}</p>
    <p>Message: {{error.message}}</p>
  </div>
</div>

<!-- 请求错误区块 -->
<div class="error-group">
  <h3>Request Errors</h3>
  <div *ngFor="let error of data.data | filterByType: 'request error'" class="error-item">
    <p>ID: {{error.id}}</p>
    <p>Message: {{error.message}}</p>
  </div>
</div>

注意事项 #

• 如果需要精确匹配type字段（而不是包含指定字符串），把代码中的includes替换成===即可，比如item.type === 'connection error'。
• 组件内预处理的方式性能更好，因为筛选只在数据加载时执行一次；自定义管道适合复用，但如果数据频繁变化，纯管道会重复执行，若需要实时响应数据变化，可以给管道添加pure: false（但不推荐，尽量优先用组件内预处理）。

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