Question

我想使用它的id提取特定产品的细节。下面是我的代码： -

这是我在英雄服务组件中创建的功能。我已经检查过，所有的东西都没有任何错误。 id的值很好但是如何使用id获取特定产品的细节。我在这里使用了observable。

getParticularHero(id: number): Observable<Hero> {
    // Todo: send the message _after_ fetching the hero
    return this.http.get<Hero>(`assets/api/mock-heroes.json/${id}`);
  }

//这是我在这里详细组件

中创建的函数

getHero(): void {
    const id = +this.route.snapshot.paramMap.get('id');
    this.heroService.getParticularHero(id)
      .subscribe(hero => this.hero = hero);
  }
//Here is my json file
[
  { "id": "11", "name": "Mr. Nice" },
  { "id": "12", "name": "Narco" },
  { "id": "13", "name": "Bombasto" },
  { "id": "20", "name": "Tornado" }
]

Answer 1

尝试使用filter方法从Observable中过滤您想要的ID，这是一个完整的解决方案：

<强> hero.service.ts

import 'rxjs/add/operator/filter';

getParticularHero(id: number): Observable<Hero> {
    // Todo: send the message _after_ fetching the hero
    return this.http.get<Hero[]>(`assets/api/mock-heroes.json`).filter(h => h.id === id);
  }

assets/api/mock-heroes.json返回

[
  { "id": "11", "name": "Mr. Nice" },
  { "id": "12", "name": "Narco" },
  { "id": "13", "name": "Bombasto" },
  { "id": "20", "name": "Tornado" }
]

<强> component.ts

hero : Observable<Hero>

constructor(private service:HeroService)

ngOnInit(){
    let id = // get ID here from route snapshot
    this.hero = this.service.getParticularHero(id)
}

<强> component.html

<!-- Use the async pipe to retrieve the latest value of the Observable --> 
<div>{{(hero | async).name}}</div>

Answer 2

您可以简单地使用javascript提供的查找功能

selectProduct(id) {
   const selectedProduct = this.hero.find(product => product.id === id)
}

我假设你必须在你的html中使用ngFor，调用此函数传递你的id，你将把产品放在selectedProduct中

如何使用角度2使用其id获取特定产品的数据

2 个答案: