在我的组件中过滤“rxjs”Observable 并渲染过滤后的对象答案

【问题标题】：Filter 'rxjs' Observable and render filtered object in my component在我的组件中过滤“rxjs”Observable 并渲染过滤后的对象
【发布时间】：2020-11-07 01:26:41
【问题描述】：

我正在尝试按 id 过滤可观察对象，但出现错误。我已经从 json 文件中获得了一些虚拟数据，但不知道如何将该对象显示为实体形式。有什么帮助吗？

Service.ts：

export class ProjectService {
  private pathurl : string = "/assets/project-data.json";
  constructor (private http: HttpClient){} 

  getProjects(): Observable<ProjectInt[]>{return this.http.get<ProjectInt[]>(this.pathurl)};

Component.ts 文件：

filterProj(){
    var filteredProj = this.projectService.getProjects() 
      .pipe
        (map(projects => this.projects.filter(project => project.id < 3))
       );

return filteredProj;
}

Components.html：

<a class="button" (click)="filterProj()"><span>DESIGN</span></a>

【问题讨论】：

json的结构是什么？

标签： angular typescript rxjs

【解决方案1】：

几个问题：

您需要订阅 observable 才能真正从中获取数据它：

data;

filterProj(){
  this.projectService.getProjects() 
     .pipe
       (map(projects => this.projects.filter(project => project.id < 3))
      )
     .subscribe(response => this.data = response);        
}

将来自 observable 的响应存储在一个变量中，例如： data。现在您可以在模板中使用它：
```
<div *ngIf="data">
   {{ data | json}}
</div>
```

【讨论】：

谢谢小伙子，我已经解决了这个问题，你给了我一个很大的提示。所以，我有几个按 id 过滤的选项（如 Id 3 && id
在这种情况下请接受答案！我没有得到你的第二个问题，你能澄清一下吗？
我想通过不同的过滤方法过滤数据。我想再次设置初始设置（未过滤）以通过不同的方法进行过滤。 filterProjLessThenThree(){ this.projectService.getProjects() .pipe( map(projects => this.projects.filter(project => project.id > 5))) .subscribe(response => this.projects = response); }filterProjBeetwenThreeAndFive(){ this.projectService.getProjects() .pipe( map(projects => this.projects.filter(project => project.id >= 3 && project.id < 5))) .subscribe(response => this.projects = response); }

【解决方案2】：

您需要从map 运算符返回过滤后的列表。

filterProj() {
  this.projectService.getProjects().pipe(
    map(projects => {
      const filteredList = projects.filter(project => project.id < 3);
      return filteredList;
    })
  );
}

或者您可以使用filter 运算符。

filterProj() {
  this.projectService.getProjects().pipe(
    filter(project => project.id < 3)
  );
}

更新：我错过了订阅部分。正如@Nicholas K 在他的回答中所建议的那样，您需要订阅您的 observable 才能获得它的价值。

一个建议：当您需要过滤数据时，filter 运算符比 map 运算符更具可读性。

【讨论】：