在 Angular 中显示嵌套的 JSON 文件

Question

我不知道应该如何遍历我所拥有的嵌套 JSON 文件。

这是我到目前为止得到的代码：

JSON:

[
    {  
    "produkt": "dammsugare",
    "produktinformation": [
        {
        "artikelnr": 9121283726,
        "typ": "ean"
        },
        {
        "artikelnr": "dasu",
        "typ": "varukod"
        }
    ]
    },
    {
    "produkt": "hammare",
    "produktinformation": [
        {
        "artikelnr": 91246128736,
        "typ": "ean"
        },
        {
        "artikelnr": "traffaspik",
        "typ": "varukod"
        }
    ]
    }
]

Service.ts:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class MyserviceService {

  constructor(private http:HttpClient) { }

  getProducts() {
    console.log('getProducts()');
    return this.http.get('/assets/produkter.json');
  }

  getInfo() {
    console.log('getInfo()');
    return this.http.get('/assets/produkter.json')
  }
}

Component.ts:

import { Component, OnInit } from '@angular/core';
import { MyserviceService } from '../myservice.service';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.scss']
})
export class ListComponent implements OnInit {

  arrProducts: any;

  constructor(private myserviceService: MyserviceService) { }

  ngOnInit() {
    this.myserviceService.getProducts().subscribe((data) => {
      console.log(data);
      this.arrProducts = data;
    });
  }
}

Component.html:

<p>list works!</p>
<ul *ngFor="let product of arrProducts">
    <li>{{ product.produkt }}</li>
    <li>{{ product.productinformation.artikelnr }}</li> <!-- THIS LINE IS WRONG, BUT I DON'T KNOW WHAT TO DO-->
</ul>

如您所见，我不知道如何编辑 component.html 以使其显示嵌套的 JSON 文件。

我希望有人能帮助我。谢谢！ :)

Answer 1

您的 JSON 结构显示 productinformation.artikelnr，但您想要访问 produktinformation.artikelnr，即。 e.你拼错了 c 而写成了 k。

Answer 2

你只是嵌套 ngFor...

<p>list works!</p>
<ul *ngFor="let product of arrProducts">
    <li>{{ product.produkt }}</li>
    <li *ngFor="let info of product.produktinformation">{{ info.artikelnr }}</li>
</ul>

在 Angular 中显示嵌套的 JSON 文件

Display nested JSON file in Angular

json

nested

angular