Question

我对Angular很新，并且关注了Pluralsight的课程。在尝试显示某个项目的详细信息时，我似乎无法弄清楚如何根据ID过滤我正在从文件中检索的项目列表。

我有获取数据的服务，在那里我有检索所有项目的方法

private _productUrl = './api/products/products.json';
getProducts(): Observable<IProduct[]>{
        return this._http.get<IProduct[]>(this._productUrl)
        .do(item => console.log(JSON.stringify(item)))
        .catch(this.handleError);
    };

相当简单，试图将我的头围绕在promises，observables等上。我无法弄清楚的是如何在内存中检索列表并仅返回与给定id匹配的元素。

getProduct(id: number): IProduct{
        this._http.get<IProduct>(this._productUrl).do(item => {if (item.productId == id) return item;});
        return null;
    }

我收到了null值。那么如何从get调用中查看并过滤列表返回？

Answer 1

在flatMap运算符之后使用rxjs Filter运算符：

.flatMap(item => item)
.filter(item => item.productId === id)

然后订阅只会解决此项目。

在您的组件中，然后：

public selectedItem: IProduct;
public ngOnInit() {
    service.getProduct(id).subscribe(item => this.selectedItem = item);
}

或使用异步管道：在组件中：

public item$: Observable<IProduct>;
public ngOnInit() {
    this.item$ = service.getProduct(id);
}

在模板中：

<cmp product="item$ | async"></cmp>

从使用HttpClient.get（）获取的列表中返回特定项

1 个答案: