时间戳

首页 > 解决方案 > 无法循环通过 Angular 8 中的 POST 请求 JSON 响应

json - 无法循环通过 Angular 8 中的 POST 请求 JSON 响应

问题描述

我正在尝试遍历对我的 REST API 执行 POST 请求后获得的 JSON 对象，但出现以下错误：

 DatetodateComponent.html:33 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
    at NgForOf.ngDoCheck (common.js:4377)
    at checkAndUpdateDirectiveInline (core.js:27791)
    at checkAndUpdateNodeInline (core.js:38472)
    at checkAndUpdateNode (core.js:38411)
    at debugCheckAndUpdateNode (core.js:39433)
    at debugCheckDirectivesFn (core.js:39376)
    at Object.eval [as updateDirectives] (DatetodateComponent.html:33)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:39364)
    at checkAndUpdateView (core.js:38376)
    at callViewAction (core.js:38742)

问题是，在其他情况下一切正常，但在这种特殊情况下，无论我做什么，我都会遇到同样的错误，我已经验证了 json 数据并且它是一个有效的 JSON 对象，这是我的代码：

  1. 我的服务.ts
    dateToDateStat(obj){
        return this.http.post("http://www.example.com/api/registres/datetodate", JSON.stringify(obj), this.httpOptions);
      }
  1. 组件.ts
    generateStat(){
            this.uploadService.dateToDateStat({'from' : '2019-12-01', 'to' : '2019-12-31'})
            .subscribe(
              (data)=>this.stats = data,
              (err)=>console.log(err)
            )
          }
  1. 模板.html
<table class="table table-bordered">
    <tbody>
        <tr *ngFor="let ln of stats; let i = index">
          <td>{{i}}</td>
          <ng-template ngFor let-l [ngForOf]="ln" let-in="index">
            <td>{{l.mousajal}}</td>
            <td>{{l.mahkoum}}</td>
          </ng-template>
        </tr>
    </tbody>
</table>

这是返回的 JSON

{
    "\u0639\u0644\u0645\u064a \u0645\u0631\u0648\u0646\u064a \u0631\u0634\u064a\u062f\u0629": {
        "\u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0633\u0624\u0648\u0644\u064a\u0629 \u0627\u0644\u0627\u062f\u0627\u0631\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0648\u0636\u0639\u064a\u0629 \u0627\u0644\u0641\u0631\u062f\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0639\u0642\u0648\u062f \u0627\u0644\u0627\u062f\u0627\u0631\u064a\u0629 \u0648 \u0627\u0644\u0635\u0641\u0642\u0627\u062a": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0646\u0632\u0639 \u0627\u0644\u0645\u0644\u0643\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u062a\u062d\u0635\u064a\u0644 \u062f\u064a\u0648\u0646 \u0627\u0644\u062e\u0632\u064a\u0646\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0646\u0627\u0632\u0639\u0627\u062a \u0627\u0644\u0636\u0631\u064a\u0628\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0633\u0627\u0639\u062f\u0629 \u0627\u0644\u0642\u0636\u0627\u0626\u064a\u0629": {
            "mousajal": 2,
            "mahkoum": 2
        },
        "\u0627\u0644\u0645\u0639\u0627\u0634\u0627\u062a \u0627\u0644\u0645\u062f\u0646\u064a\u0629 \u0648\u0627\u0644\u0639\u0633\u0643\u0631\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0646\u0627\u0632\u0639\u0627\u062a \u0627\u0644\u0627\u0646\u062a\u062e\u0627\u0628\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0625\u064a\u0642\u0627\u0641 \u062a\u0646\u0641\u064a\u0630 \u0627\u0644\u0642\u0631\u0627\u0631\u0627\u062a \u0627\u0644\u0625\u062f\u0627\u0631\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u062a\u062c\u0627\u0648\u0632 \u0627\u0644\u0633\u0644\u0637\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u062d\u062c\u0632 \u0644\u062f\u0649 \u0627\u0644\u063a\u064a\u0631": {
            "mousajal": 4,
            "mahkoum": 0
        },
        "\u0627\ufef7\u0648\u0627\u0645\u0631 \u0627\u0644\u0645\u0628\u0646\u064a\u0629 \u0639\u0644\u0649 \u0637\u0644\u0628": {
            "mousajal": 14,
            "mahkoum": 14
        },
        "\u0627\u0644\u0627\u0633\u062a\u0639\u062c\u0627\u0644\u064a": {
            "mousajal": 54,
            "mahkoum": 50
        }
    },
    "\u0628\u0648\u0634\u0647\u0627\u0628 \u0627\u0644\u0635\u062f\u064a\u0642": {
        "\u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629": {
            "mousajal": 1,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0633\u0624\u0648\u0644\u064a\u0629 \u0627\u0644\u0627\u062f\u0627\u0631\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0648\u0636\u0639\u064a\u0629 \u0627\u0644\u0641\u0631\u062f\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0639\u0642\u0648\u062f \u0627\u0644\u0627\u062f\u0627\u0631\u064a\u0629 \u0648 \u0627\u0644\u0635\u0641\u0642\u0627\u062a": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0646\u0632\u0639 \u0627\u0644\u0645\u0644\u0643\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u062a\u062d\u0635\u064a\u0644 \u062f\u064a\u0648\u0646 \u0627\u0644\u062e\u0632\u064a\u0646\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0646\u0627\u0632\u0639\u0627\u062a \u0627\u0644\u0636\u0631\u064a\u0628\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 1
        },
        "\u0627\u0644\u0645\u0633\u0627\u0639\u062f\u0629 \u0627\u0644\u0642\u0636\u0627\u0626\u064a\u0629": {
            "mousajal": 1,
            "mahkoum": 1
        },
        "\u0627\u0644\u0645\u0639\u0627\u0634\u0627\u062a \u0627\u0644\u0645\u062f\u0646\u064a\u0629 \u0648\u0627\u0644\u0639\u0633\u0643\u0631\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0646\u0627\u0632\u0639\u0627\u062a \u0627\u0644\u0627\u0646\u062a\u062e\u0627\u0628\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0625\u064a\u0642\u0627\u0641 \u062a\u0646\u0641\u064a\u0630 \u0627\u0644\u0642\u0631\u0627\u0631\u0627\u062a \u0627\u0644\u0625\u062f\u0627\u0631\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u062a\u062c\u0627\u0648\u0632 \u0627\u0644\u0633\u0644\u0637\u0629": {
            "mousajal": 0,
            "mahkoum": 2
        },
        "\u0627\u0644\u062d\u062c\u0632 \u0644\u062f\u0649 \u0627\u0644\u063a\u064a\u0631": {
            "mousajal": 4,
            "mahkoum": 10
        },
        "\u0627\ufef7\u0648\u0627\u0645\u0631 \u0627\u0644\u0645\u0628\u0646\u064a\u0629 \u0639\u0644\u0649 \u0637\u0644\u0628": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0627\u0633\u062a\u0639\u062c\u0627\u0644\u064a": {
            "mousajal": 2,
            "mahkoum": 11
        }
    },
    "\u0631\u0634\u064a\u062f\u064a \u062d\u0645\u064a\u062f": {
        "\u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629": {
            "mousajal": 0,
            "mahkoum": 1
        },
        "\u0627\u0644\u0645\u0633\u0624\u0648\u0644\u064a\u0629 \u0627\u0644\u0627\u062f\u0627\u0631\u064a\u0629": {
            "mousajal": 4,
            "mahkoum": 10
        },
        "\u0627\u0644\u0648\u0636\u0639\u064a\u0629 \u0627\u0644\u0641\u0631\u062f\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 2
        },
        "\u0627\u0644\u0639\u0642\u0648\u062f \u0627\u0644\u0627\u062f\u0627\u0631\u064a\u0629 \u0648 \u0627\u0644\u0635\u0641\u0642\u0627\u062a": {
            "mousajal": 1,
            "mahkoum": 3
        },
        "\u0646\u0632\u0639 \u0627\u0644\u0645\u0644\u0643\u064a\u0629": {
            "mousajal": 1,
            "mahkoum": 3
        },
        "\u062a\u062d\u0635\u064a\u0644 \u062f\u064a\u0648\u0646 \u0627\u0644\u062e\u0632\u064a\u0646\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0646\u0627\u0632\u0639\u0627\u062a \u0627\u0644\u0636\u0631\u064a\u0628\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 2
        },
        "\u0627\u0644\u0645\u0633\u0627\u0639\u062f\u0629 \u0627\u0644\u0642\u0636\u0627\u0626\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0639\u0627\u0634\u0627\u062a \u0627\u0644\u0645\u062f\u0646\u064a\u0629 \u0648\u0627\u0644\u0639\u0633\u0643\u0631\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0646\u0627\u0632\u0639\u0627\u062a \u0627\u0644\u0627\u0646\u062a\u062e\u0627\u0628\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0625\u064a\u0642\u0627\u0641 \u062a\u0646\u0641\u064a\u0630 \u0627\u0644\u0642\u0631\u0627\u0631\u0627\u062a \u0627\u0644\u0625\u062f\u0627\u0631\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u062a\u062c\u0627\u0648\u0632 \u0627\u0644\u0633\u0644\u0637\u0629": {
            "mousajal": 1,
            "mahkoum": 5
        },
        "\u0627\u0644\u062d\u062c\u0632 \u0644\u062f\u0649 \u0627\u0644\u063a\u064a\u0631": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\ufef7\u0648\u0627\u0645\u0631 \u0627\u0644\u0645\u0628\u0646\u064a\u0629 \u0639\u0644\u0649 \u0637\u0644\u0628": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0627\u0633\u062a\u0639\u062c\u0627\u0644\u064a": {
            "mousajal": 0,
            "mahkoum": 0
        }
    },
    "\u0631\u0627\u0641\u0639 \u0645\u062d\u0645\u062f\t": {
        "\u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0633\u0624\u0648\u0644\u064a\u0629 \u0627\u0644\u0627\u062f\u0627\u0631\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0648\u0636\u0639\u064a\u0629 \u0627\u0644\u0641\u0631\u062f\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0639\u0642\u0648\u062f \u0627\u0644\u0627\u062f\u0627\u0631\u064a\u0629 \u0648 \u0627\u0644\u0635\u0641\u0642\u0627\u062a": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0646\u0632\u0639 \u0627\u0644\u0645\u0644\u0643\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u062a\u062d\u0635\u064a\u0644 \u062f\u064a\u0648\u0646 \u0627\u0644\u062e\u0632\u064a\u0646\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0646\u0627\u0632\u0639\u0627\u062a \u0627\u0644\u0636\u0631\u064a\u0628\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0633\u0627\u0639\u062f\u0629 \u0627\u0644\u0642\u0636\u0627\u0626\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0639\u0627\u0634\u0627\u062a \u0627\u0644\u0645\u062f\u0646\u064a\u0629 \u0648\u0627\u0644\u0639\u0633\u0643\u0631\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0646\u0627\u0632\u0639\u0627\u062a \u0627\u0644\u0627\u0646\u062a\u062e\u0627\u0628\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0625\u064a\u0642\u0627\u0641 \u062a\u0646\u0641\u064a\u0630 \u0627\u0644\u0642\u0631\u0627\u0631\u0627\u062a \u0627\u0644\u0625\u062f\u0627\u0631\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u062a\u062c\u0627\u0648\u0632 \u0627\u0644\u0633\u0644\u0637\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u062d\u062c\u0632 \u0644\u062f\u0649 \u0627\u0644\u063a\u064a\u0631": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\ufef7\u0648\u0627\u0645\u0631 \u0627\u0644\u0645\u0628\u0646\u064a\u0629 \u0639\u0644\u0649 \u0637\u0644\u0628": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0627\u0633\u062a\u0639\u062c\u0627\u0644\u064a": {
            "mousajal": 0,
            "mahkoum": 0
        }
    }
}

标签： jsonangularbindingobservablengfor

解决方案

ngFor 仅适用于数组。您的响应不是其对象的数组。Object.keys(yourObject) 返回您的对象键数组。

TS

export class AppComponent  {

  stats = {
    'id_01': {
      name: 'feyz',
      lastname: 'yild'
    },
    'id_02': {
      name: 'user2',
      lastname: 'user2'
    },
  }
  keys = Object.keys(this.stats)
  ngOnInit() {
    console.log('this.keys', this.keys)
  }
}

HTML

 <tbody>
    <tr>
      <td>key</td>
      <td>name</td>
      <td>lastname</td>
    </tr>
    <tr *ngFor="let key of keys">
      <td>{{key}}</td>
      <td>{{stats[key].name}}</td>
      <td>{{stats[key].lastname}}</td>
    </tr>
</tbody>

推荐阅读