Question

我有这个JSON对象：

[
    {
    "products": [
        {
            "id": "1",
            "name": "Apple",
            "price": "free",
            "imageURL": "assets/apples.jpg",
            "category": "Fruits"
        },
      and so on...

我正在尝试获取这样的详细信息页面：

HomeTS

categories: any;
  products: Product[]=[];
  filteredProducts: Product[]=[];
  category: string;
  constructor(private dataService: DataService, private route: ActivatedRoute) { }
  ngOnInit() {
          this.route.queryParams.subscribe(params=>{
            console.log(params);
          this.category = params['categories'];
          forkJoin([this.getCategories(), this.getProducts()]).subscribe(() =>  {

              this.filteredProducts=(this.categories && this.category)? 
              this.products.filter(p=> p.category.toLowerCase()===this.category.toLowerCase()) :
              this.products; 
              console.log(this.filteredProducts)
          });

         })
      }

      public getCategories(): Observable<boolean> {
        return this.dataService.getCategories().pipe(map(categories => {
          this.categories = categories[0]['categories']
          return true;
        }));
      }
      public getProducts(): Observable<boolean> {
        return this.dataService.getProducts().pipe(map(p => {
          this.products = p[0]['products']
          console.log(this.products)
          return true;
        }));
      }

主页HTML

            <div *ngFor="let c of categories">
                <a  
                class="list-group-item list-group-item-action"  
                routerLink='/home' 
                [queryParams]='{categories: c.name}'
                [class.active]="category===c.name">
                    {{c.name}}
                </a>

            <ng-container *ngFor="let f of filteredProducts">
            <div class="card" style="width: 15rem;">
                <img [src]="f.imageURL" class="card-img-top" alt="...">
                <div class="card-body" >
                  <h5 class="card-title">{{f.name}}</h5>
                  <a [routerLink]="['/detail',f.id]" class="btn btn-primary">See more</a>
                </div>
              </div>
            </ng-container>

Detail.TS

id: any;
  product:any;
  constructor(private route: ActivatedRoute, private dataService: DataService) { }

  ngOnInit(): void {
    this.route.paramMap.pipe(switchMap(params => {
      this.id = params.get('id')
      console.log(this.id)--->Gives me 1, for example
      return this.dataService.getProduct(this.id)
    })
    ).subscribe(data => {
      this.product = data;
      console.log(this.product) ->gives all the objects...
    })

  }
}

以及数据服务方法：

public getProduct(id):Observable<any>{
    return this.http.get('assets/products.json', id) 
  }

URL很好，给了我id，出现了详细信息页面，但是没有任何显示。我想可能是DataService方法获取ID有点错误。使用普通的api，外部，这是我的方法，但是使用本地JSON的与众不同？另外，我的路由也已正确配置detail/:id

编辑：@pc_coder：如果我将其放在html {{id}}上，我会得到类似的东西

Answer 1

Demo您是否正在寻找类似的东西？

public getProduct(id):Observable<any>{
    return this.http.get('/assets/products.json/').map( (res: Response) => res[0].products.filter(x=>x.id==id));
  }

如何在详细信息页面Angular 9中从单个对象（本地JSON）获取详细信息

1 个答案: