如何从缓存的可观察数组中查找单个项目

问题描述

过去几天来一直试图解决这个问题，但我没有运气。

这就是我想要做的。

我的网站向http get请求获取项目列表，并使用ngFor循环在首页上显示这些项目。我在我的Observable上使用shareReplay缓存了这些结果，这样当我查看单个项目时-不需要执行其他网络请求。

我的问题是，在缓存了缓存之后，我找不到从可观察对象数组中提取单个项目的方法。我知道.find或.filter，但它们看起来好像是在最初获取可观察对象时使用的，而不是在将其与shareReplay缓存在一起后使用的。

下面是我的代码。

DECLARE @Date Date =GetDate();
SELECT @Date =Format(@Date,'yyyyMM01');
SELECT [Date]=@Date

我尝试了很多组合。在服务中添加.find无效，因为我的项目componenet无法获得所有项目。我累了

    //service.ts

    get allProjects() {
        if (!this.cache$) {
            this.cache$ = this.fetchProjects().pipe(shareReplay(1));
        }
        return this.cache$;
    }


    fetchProjects() {
    return this.http
        .get<Project[]>(
            'https://admin.steezy.io/wp-json/wp/v2/posts?categories=5'
        )
        .pipe(
            map((projects) => {
                return projects.map((item) => {
                    return new Project(
                        item.id,item.slug,item.title,item.content,item.better_featured_image,new Acf(
                            item.acf.projectDescription,item.acf.projectTypeOfWork,item.acf.sliderLinks
                        )
                    );
                });
            }),);
     }

     // component.ts

     ngOnInit(): void {
           const slug = this.route.snapshot.params['slug'];
           this.project = this.projectService.singleProject;
           return this.project;
     }

但是它告诉我 this.project = this.projectService.cache$.find( (project) => project.slug == slug );

我尝试使用.filter并遇到相同的问题。

这似乎是一件容易的事，但是由于某种原因，我很沮丧。我已经缓存了数据，我所要做的就是根据弹头挑选一个对象。

有什么想法吗？

---

编辑：

我根据阿德里安的回答解决了这个问题。现在我的IDE中出现一个小错误

Property 'find' does not exist on type 'Observable<Project[]>'

<div class="container" *ngIf="project$ | async as project"> <div class="row my-5"> <div class="col-sm-12 text-center"> <h1> <!-- {{ project$ | async | json }} --> {{ project.title.rendered }} //project.model.ts export class Project { constructor( public id: number,public slug: string,public title: Title,public content: string,public better_featured_image: string,public acf: Acf ) {} } export class Title { constructor(public rendered: string) {} } export class Acf { constructor( public projectDescription: string,public projectTypeOfWork: string,public sliderLinks: any = null ) {} } 用红色下划线表示，我的想法是title

知道为什么吗？

解决方法

通过地图传递可观察对象

this.project$ = this.projectService.cache$.pipe(
  map(projects => projects.find(project => project.slug == slug))
);

请注意，project $是可观察的，而不是项目对象。您将需要使用异步管道将其解开或订阅。

像这样展开

<ng-container *ngIf="project$ | async as project">
  {{ project | json }}
</ng-container>