无法在Angular 8中循环通过POST请求JSON响应

问题描述 投票：0回答：1

我正在尝试遍历对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. myservice.ts
    dateToDateStat(obj){
        return this.http.post("http://www.example.com/api/registres/datetodate", JSON.stringify(obj), this.httpOptions);
      }
  1. component.ts
    generateStat(){
            this.uploadService.dateToDateStat({'from' : '2019-12-01', 'to' : '2019-12-31'})
            .subscribe(
              (data)=>this.stats = data,
              (err)=>console.log(err)
            )
          }
  1. template.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
        }
    }
}
json angular binding observable ngfor
1个回答
0
投票

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

<table class="table table-bordered">
    <tbody>
        <tr *ngFor="let key of Object.keys(stats); let i = index">
          <td>{{i}}</td>
          <ng-template *ngFor="let l of stats[key]">
            <td>{{l.mousajal}}</td>
            <td>{{l.mahkoum}}</td>
          </ng-template>
        </tr>
    </tbody>
</table>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.