如何在 Angular 8 中显示嵌套的 json答案

【问题标题】：How to display a nested json in Angular 8如何在 Angular 8 中显示嵌套的 json
【发布时间】：2020-03-02 13:00:48
【问题描述】：

谁能告诉我如何在 Angular 中输出嵌套的 Json？

这是我的代码：

我的 Json：

{
      "success": true,
      "act_bilanz": {
      "act_bilanz-result": [
      {
      "period": 7.0,
      "amount": 0.05516859,
      "name": "A. I. 1. EDV-Software",
      "mandantKagId": 660.0,
      "db-nr": 102000.0
      },
      ]
      }
      }

我的服务：

 // Get all data for actBalance
  getAllActBalanceData(context: string): Observable<any> {
    const url = `/act_balance?context=${context}`;
    return this.http.get<any>(`${environment.baseUrl}` + url);
  }

我的功能：

 private loadData() {
    const yearString = this.year ? `${this.year}` : `${new Date().getFullYear()}`;
    this.actBalanceService.getAllActBalanceData(yearString).subscribe(
      (resp: any) => {
        const data = resp.act_bilanz;
});
}

【问题讨论】：

“输出嵌套的 Json”是什么意思？
我想访问act_bilanz-result并输出内容。

标签： json angular httpclient

【解决方案1】：

您可以将响应设置为这样的数组

private loadData() {
    const yearString = this.year ? `${this.year}` : `${new Date().getFullYear()}`;
    this.actBalanceService.getAllActBalanceData(yearString).subscribe(
      (resp: any) => {
        const data = resp.act_bilanz;
        let act_bilanzes = resp.act_bilanz-result;
        foreach(item in act_bilanzes){
             console.log(item);
        } 
     });
}

【讨论】：

【解决方案2】：

您需要声明一个存储响应的变量：

打字稿：

act_bilanz;

private loadData() {
    const yearString = this.year ? `${this.year}` : `${new Date().getFullYear()}`;
    this.actBalanceService.getAllActBalanceData(yearString).subscribe(
      (resp: any) => {
        this.act_bilanz = resp.act_bilanz;
});

HTML：

<li *ngFor="let act_bilanz of act_bilanz.act_bilanz-result;">
    {{ act_bilanz | json}}
</li>

【讨论】：

这个例子也可以用在mat-table中吗？
@anyanx 是的，当然可以使用
当我调用 act_bilanz-result 时，IDE 告诉我他找不到结果...处理此问题的最佳方法是什么？
@anyanx 你能创建一个stackblitz 的例子吗？
这是我的组件，我想将 act_bwa-result 的内容输出到我的 mat-table stackblitz.com/edit/…

【解决方案3】：

我解决了这个问题。

这是我的解决方案：

private loadData() {
    const yearString = this.year ? `${this.year}` : `${new Date().getFullYear()}`;
    this.actBalanceService.getAllActBalanceData(yearString).subscribe (
      (resp: any) => {
        const data = resp.act_bilanz['act_bilanz-result'].map((obj) => obj.data);
        if (null !== data && data) {
          const rows = [];
          const kagData = [];
          const kags = data.map((d) => d.kagNumber)...;

我现在有一个新问题。当我运行应用程序时，出现错误消息

ERROR TypeError: The 'kagNumber' property of undefined cannot be read
at act-balance-content.component.ts: 169
at Array.map (<anonym>)
at SafeSubscriber._next (act-balance-content.component.ts: 169)
at SafeSubscriber .__ tryOrUnsub (Subscriber.js: 185)
at SafeSubscriber.next (Subscriber.js: 124)
at Subscriber._next (Subscriber.js: 72)
at Subscriber.next (Subscriber.js: 49)
at MapSubscriber._next (map.js: 35)
at MapSubscriber.next (Subscriber.js: 49)
at FilterSubscriber._next (filter.js: 33)

我该如何解决这个问题？

【讨论】：