Angular报错Property 'pipe' does not exist on type 点击过滤数组失败如何解决

错误原因说明 #

1. pipe方法仅适用于rxjs的Observable异步流对象，你代码中的streams是已经通过subscribe拿到的普通JavaScript数组，本身不存在pipe方法，调用自然会报错。
2. 直接调用filter不生效的核心原因是你没有把filter执行后的返回值赋值给模板遍历的streams变量，视图没有拿到新数据自然不会更新；另外如果直接在已经过滤过的数组上二次筛选，还会导致数据范围不断缩小，无法得到正确结果。

解决方案 #

1. 修改component.ts代码

import { Component, OnInit} from '@angular/core';
import { StreamService } from '../stream.service';
import { Stream } from '../stream';

@Component({
  selector: 'app-discover',
  templateUrl: './discover.component.html',
  styleUrls: ['./discover.component.scss']
})
export class DiscoverComponent implements OnInit {
  streams!: Stream[];
  // 新增原始数据存储变量，保存全量未过滤的数据源
  originalStreams!: Stream[];
  
  constructor(private streamService: StreamService) { }

  ngOnInit() {
    this.getStreams();
  }

  getStreams(){
    this.streamService.getStream().subscribe((data =>{
      this.originalStreams = data;
      this.streams = data;
      console.log(this.streams);
    }))
  }

  filterIsUneven(){
    // 从全量原始数据筛选，结果赋值给展示用的streams变量触发视图更新
    // 这里条件按你的需求调整，当前是保留id模3不等于0的项，要模3等于0就改成===0
    this.streams = this.originalStreams.filter(stream => stream.id % 3 !== 0);
  }

  // 新增重置方法，适配Back按钮需求
  resetFilter(){
    this.streams = [...this.originalStreams];
  }
}

2. 修改模板绑定Back按钮事件

<button (click)="resetFilter()">Back</button>

补充说明 #

后续要加其他分类按钮（Music、Esports等）的过滤逻辑时，都可以基于originalStreams做筛选后赋值给streams，Angular会自动更新视图。

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