*NgFor 自定义 JSON 类别文件不呈现

Question

我的资产有这个简单的结构：

[
  {
    "categories": [
      {
        "name":  "Fruits"
          },
          {
            "name": "vegetables"
          },
        {
          "name": "Meat"
        }
    ]
  }
]

我的数据服务（带有两个 JSONS 调用）：

getCategories() {
    return this.http.get<any>('./assets/categories.json')
  }

getProducts() {
    return this.http.get<any>('./assets/products.json')

  }

首页 TS（已编辑）

 ngOnInit(): void {
this.dataService.getCategories().subscribe(data=>{
  this.categories=data[0]['categories'] -> this works!!
  console.log(data)

}) 
this.dataService.getProducts().subscribe(data=>{
  this.products=data[0]['products']
  console.log(data)

})

}

主页 HTML：（已编辑）

<div class="col-md-4" >
            <div class="list-group" style="color:black">
                <a 
                *ngFor="let c of categories"
                routerLink='/home'
                [queryParams]="{categories:c.name}"
                class="list-group-item list-group-item-action"
                [class.active]='categories===c.name'>
                    {{c.name}}
                </a>
            </div>
        </div>
        <div class="col-md-8" >
            <ul class="list-group" *ngFor="let p of products">
                <li class="list-group-item">
                    {{p.name}}
                </li>
            </ul>
        </div>

日志很好，但产品 JSNON 并没有像类别那样显示。不知何故，我无法显示类别并继续该项目。 JSON 格式是否错误？我叫错了吗？谁能给我个提示好吗？

编辑（@Michael D）：尽管类别 JSON 问题已解决，但我提出了另一个问题，但他的第二个 JSON 具有相同的结构！我只是不明白我错过了什么。在这里

第二个 JSON：

[
    {
    "products:": [
        {
            "id": "1",
            "name": "Apple",
            "price": "free",
            "category": "Fruits"
        },



        {
            "id": "5",
            "name": "Grass",
            "price": "Free",
            "category": "Vegetabes"
        },
        {
            "id": "6",
            "price": "Free",
            "category": "Vegetabes"
        }
    ]
}
]

两个日志的快照：

Answer 1

categories.json 不直接包含对象，而是包含一个数组，该数组具有父级属性categories 的一个元素。试试下面的

this.dataService.getCategories().subscribe(
  data => {
    this.categories = data[0]['categories'];
    console.log(data);
  }
);

更新：forkJoin 合并可观察对象

如果你要同时订阅多个 observable，你可以使用 RxJS forkJoin 来组合它们。我怀疑这会解决 products 对象的问题，但它更优雅，不会影响机会。

import { forkJoin } from 'rxjs';

ngOnInit() {
  forkJoin({
    categories: this.dataService.getCategories(),
    products: this.dataService.getProducts(),
  })
  .subscribe(
    response => {
      // handle reponse
      this.categories = response.categories[0]['categories'];
      this.products = response.products[0]['products'];
    },
    error => { // handle error }
  );
}

更新：products.json 问题

products.json 文件中似乎存在潜在的拼写错误。密钥是products:。实际上它会是products。