Question

我想在AngularJs2中迭代下面的JSON JsonRawData 对象。为此，我使用以下代码：

<div *ngFor="let item of userData;">
                <tr *ngFor="let subitem of item.JsonRawData;" >

但它让我异常即错误：

找不到不同的支持对象' [{“USER_ID”：null，“firstName”：“......”：null}]'类型为'string'。 NgFor 仅支持绑定到Iterables，例如Arrays。

来自Web API的我的JSON：

[
  {
    "USER_ID": "a8717928-2e87-4627-b3c3-2e2549f0dc48",
    "**JsonRawData**": " [{\"USER_ID\":null,\"firstName\":\"sumit\",\"lastName\":\"joshi\",\"landline\":\"01127850127\",\"phone\":null,\"gender\":\"Married\",\"maritalstatus\":\"D\",\"gotra\":\"Kaushik\",\"dob\":{\"date\":{\"year\":\"2017\",\"month\":\"12\",\"day\":\"24\"},\"jsdate\":\"\",\"formatted\":\"\",\"epoc\":\"\"},\"birthplace\":\"Delhi\",\"time\":{\"hh\":\"12\",\"min\":\"1\",\"sec\":\"49\"},\"password\":\"12234\",\"confirmPassword\":\"\",\"height\":\"5.7\",\"weight\":\"84\",\"incomerange\":\"10000-20000\",\"smokestatus\":\"Yes\",\"dietstatus\":\"Veg\",\"workstatus\":\"job\",\"drinkstatus\":\"No\",\"religion\":\"Hindu\",\"mothertounge\":\"Hindi\",\"rashi\":\"5\",\"education\":\"MBA\",\"profession\":\"Job\",\"address\":\"Roihini\",\"country\":\"india\",\"city\":\"delhi\",\"place\":\"delhi\",\"zip\":\"110089\",\"about\":\"about me\",\"mySubCaste\":\"joshi\",\"recaptcha\":\"\",\"email\":\"a11rtg52@a.com\",\"nativeplace\":null,\"mobile\":\"9650899699\",\"JsonRawData\":null}]",
    "USER_PEROFILE_ID": 1
  },
  {
    "USER_ID": "c007dfca-f478-4794-b190-97fb1d5667c3",
    "JsonRawData": "[{\"USER_ID\":null,\"firstName\":\"sumit\",\"lastName\":\"joshi\",\"landline\":\"01127850127\",\"phone\":null,\"gender\":\"Married\",\"maritalstatus\":\"D\",\"gotra\":\"Kaushik\",\"dob\":{\"date\":{\"year\":\"2017\",\"month\":\"12\",\"day\":\"24\"},\"jsdate\":\"\",\"formatted\":\"\",\"epoc\":\"\"},\"birthplace\":\"Delhi\",\"time\":{\"hh\":\"12\",\"min\":\"1\",\"sec\":\"49\"},\"password\":\"12234\",\"confirmPassword\":\"\",\"height\":\"5.7\",\"weight\":\"84\",\"incomerange\":\"10000-20000\",\"smokestatus\":\"Yes\",\"dietstatus\":\"Veg\",\"workstatus\":\"job\",\"drinkstatus\":\"No\",\"religion\":\"Hindu\",\"mothertounge\":\"Hindi\",\"rashi\":\"5\",\"education\":\"MBA\",\"profession\":\"Job\",\"address\":\"Roihini\",\"country\":\"india\",\"city\":\"delhi\",\"place\":\"delhi\",\"zip\":\"110089\",\"about\":\"about me\",\"mySubCaste\":\"joshi\",\"recaptcha\":\"\",\"email\":\"a1138412@a.com\",\"nativeplace\":null,\"mobile\":\"9650899699\",\"JsonRawData\":null,\"USER_PEROFILE_ID\":0}]",
    "USER_PEROFILE_ID": 2
  }
]

Answer 1

您需要将其转换为JSON。您需要将其解析为JSON。

toJson(data) {
  data.JsonRawData = JSON.parse(data.JsonRawData.replace(/\//g, ""));
  return data;
}

Answer 2

您的对象有反斜杠，因此ng-repeate不会将值作为数组获取。所以你应该删除\并重新分配对象。像这样

在typescript中你需要使用循环替换反斜杠。

for (let i = 0; i <= this.userData.length; i++) {
            this.userData[i].JsonRawData = this.userData[i].JsonRawData.replace(/\//g, "");

        }

Answer 3

在循环之前，你必须解析JsonRawData。 https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

toObject(items) {
   return JSON.parse(items);
}

Answer 4

按如下方式解析您的Json数据

*ngFor="let item of userData;   
  *ngFor="let subitem of toJson(item.JsonRawData)

在component.ts文件中添加一个方法toJson（）

toJson(data){
JSON.parse(data)
}

Json parsed data

在ngForm

4 个答案: