将 Json 转换为数组并在 html 中使用 for 循环在 Angular 中迭代时出错答案

【问题标题】：Error while converting Json to an array and iterating in html using for loop in angular将 Json 转换为数组并在 html 中使用 for 循环在 Angular 中迭代时出错
【发布时间】：2021-06-30 11:33:38
【问题描述】：

我正在使用 Angular，我正在从 api 获取数据，获取以下列之一的调用。如前所述，我将此 json 转换为数组。当我在 html 上迭代它时，我得到了错误。我的目标是使用 ngfor 在 html 中迭代以下列数据。请帮我实现功能。

[{"Parent": null, "GradeCode": null, "BrandName": "CORONA", "Manufacturer": null, "Description": null, "BrandStatus": 1, "ManufacturerName": "", "ParentBrandName": "CORONA", "id": 7101}, 
{"Parent": "hhh", "GradeCode": null, "BrandName": "TSINGTAO", "Manufacturer": null, "Description": null, "BrandStatus": 1, "ManufacturerName": "", "ParentBrandName": "TSINGTAO", "id": 7100}]

我将此数据推送到数组

data: any = [];

我将上面的“数据”从 json 转换为数组，如下所示。但是，我得到的错误是：

" ERROR TypeError: this.data.forEach 不是函数。

data1=[];
  ngOnInit()
  {
    var StringifyData=JSON.stringify(this.data)
    console.log(this.data)
    this.data.forEach((item,index)=>{
        var obj;
        obj={
          Parent:item.Parent,
          text:item.BrandName,
        }
       this.data1.push(obj)
    });
     console.log(JSON.stringify(this.data1))
  }
}

【问题讨论】：

标签： arrays json angular ngfor

【解决方案1】：

试试这个：

Array.prototype.forEach.call(this.data, item => {
//logic goes here... 
})

【讨论】：

【解决方案2】：

您不应该将数组推送到 data 对象。

您可以将数组中的元素分配或推送到data 对象。

所以，你可以这样做：

this.data = [
      {
        Parent: null,
        GradeCode: null,
        BrandName: "CORONA",
        Manufacturer: null,
        Description: null,
        BrandStatus: 1,
        ManufacturerName: "",
        ParentBrandName: "CORONA",
        id: 7101
      },
      {
        Parent: "hhh",
        GradeCode: null,
        BrandName: "TSINGTAO",
        Manufacturer: null,
        Description: null,
        BrandStatus: 1,
        ManufacturerName: "",
        ParentBrandName: "TSINGTAO",
        id: 7100
      }
    ];

或者这个：

[
      {
        Parent: null,
        GradeCode: null,
        BrandName: "CORONA",
        Manufacturer: null,
        Description: null,
        BrandStatus: 1,
        ManufacturerName: "",
        ParentBrandName: "CORONA",
        id: 7101
      },
      {
        Parent: "hhh",
        GradeCode: null,
        BrandName: "TSINGTAO",
        Manufacturer: null,
        Description: null,
        BrandStatus: 1,
        ManufacturerName: "",
        ParentBrandName: "TSINGTAO",
        id: 7100
      }
    ];

    [
      {
        Parent: null,
        GradeCode: null,
        BrandName: "CORONA",
        Manufacturer: null,
        Description: null,
        BrandStatus: 1,
        ManufacturerName: "",
        ParentBrandName: "CORONA",
        id: 7101
      },
      {
        Parent: "hhh",
        GradeCode: null,
        BrandName: "TSINGTAO",
        Manufacturer: null,
        Description: null,
        BrandStatus: 1,
        ManufacturerName: "",
        ParentBrandName: "TSINGTAO",
        id: 7100
      }
    ].forEach(f => this.data.push(f));

注意：第一个最好在这里尝试。

工作演示StackBlitz。

【讨论】：