Question

我有json响应，我试图迭代json响应，但它给出了错误

我不知道angular2是否不像这样支持迭代，因为我是angular2的新手

致电

return this.http.post(this.url,params)
        .map(res => res.json())

分配对travelGuides的回应

.subscribe(travelGuides => {
        this.travelGuides = travelGuides.resultData;         
}

JSON

{
  "resultCode": 1,
  "resultData": {
    "TravelGuide": [
      {
        "Help": "TravelGuide",
        "IsDocument": "1",
        "EventType": "Success",
        "Category": "HOTEL",
        "SupplierType": "SUPTYPE-0-0-11",
        "HotelSrno": "HOTEL-0-0-62",
        "Name": "Radisson Blu Plaza Bangkok",
        "Optional": "0",
        "Fileupload1": "hotel.jpg",
        "FileUpload1Path": "/Documents/MasterData/HOTEL/HOTEL-0-0-62/hotel.jpg"
      },
      {
        "Help": "TravelGuide",
        "IsDocument": "1",
        "EventType": "Success",
        "Category": "HOTEL",
        "SupplierType": "SUPTYPE-0-0-11",
        "HotelSrno": "HOTEL-0-0-62",
        "Name": "Radisson Blu Plaza Bangkok",
        "Optional": "0",
        "Fileupload1": "hotel.jpg",
        "FileUpload1Path": "/Documents/MasterData/HOTEL/HOTEL-0-0-62/hotel.jpg"
      }
    ],
    "TravelGuide_Img": [
      {
        "Help": "TravelGuide_Img",
        "IsDocument": "0",
        "EventType": "Success",
        "Category": "HOTEL",
        "Name": "hotelimage.jpg",
        "TextoverImg": "Radisson Blu ",
        "Textbox2": "/Documents/MasterData/HOTELIMG/HOTELIMG-0-0-1",
        "AltText": "Radisson Blu ",
        "path": "/Documents/MasterData/HOTELIMG/HOTELIMG-0-0-1/hotelimage.jpg",
        "ImageCategoryName": "IMGCATG",
        "HotelName": "Radisson Blu Plaza Bangkok",
        "ImageSize": "Medium",
        "ImageResolution": "IMGSIZE-0-0-1",
        "ImageCategory": "IMGCATG",
        "Hotel": "HOTEL-0-0-62",
        "ImageSize_srno": "IMGSIZE-0-0-1",
        "ImageResolution1": "RESOLUTIO-0-0-1"
      },
      {
        "Help": "TravelGuide_Img",
        "IsDocument": "0",
        "EventType": "Success",
        "Category": "HOTEL",
        "Name": "hotelimage.jpg",
        "TextoverImg": "Text Over Image",
        "Textbox2": "/Documents/MasterData/HOTELIMG/HOTELIMG-0-0-2",
        "AltText": "Text Over Image",
        "path": "/Documents/MasterData/HOTELIMG/HOTELIMG-0-0-2/hotelimage.jpg",
        "ImageCategoryName": "IMGCATG",
        "HotelName": "Pullman Bangkok Hotel G",
        "ImageSize": "Medium",
        "ImageResolution": "IMGSIZE-0-0-1",
        "ImageCategory": "IMGCATG",
        "Hotel": "HOTEL-0-0-63",
        "ImageSize_srno": "IMGSIZE-0-0-1",
        "ImageResolution1": "RESOLUTIO-0-0-2"
      }
    ]
  }
}

这里是* ngFor im trying

 <div *ngFor="let travelguide of travelGuides">
   {{travelguide.TravelGuide.Category}}
 </div>

但是得到了这个

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

也尝试了

 <div *ngFor="let travelguide of travelGuides.TravelGuide">
   {{travelguide.Category}}
 </div>

获取此错误

Cannot read property 'TravelGuide' of undefined

Answer 1

假设travelGuides是异步分配的，那么您的代码应该是

<div *ngFor="let travelguide of travelGuides?.TravelGuide">
 {{travelguide?.Category}}
</div>

有关安全导航操作员（？）的更多信息：Why we use "?" operator in template binding in angular 2

或

<div *ngIf="travelGuides && travelGuides.length && travelGuides.length > 0">
  <div *ngFor="let travelguide of travelGuides.TravelGuide">
   {{travelguide.Category}}
  </div>
</div>

Answer 2

我认为如果你要将整个回复分配给travelGuides，那应该是，

 <div *ngFor="let travelguide of travelGuides?.resultData.TravelGuide">
   {{travelguide.Category}}
 </div>

修改

将作业部分更改为

.subscribe(travelGuides => { this.travelGuides = travelGuides.resultData.TravelGuide; }

和 HTML

<div *ngFor="let travelguide of travelGuides?.TravelGuide"> {{travelguide?.Category}} </div>

Answer 3

如果您的组件模型如下所示：

this.responseData = {
  "resultCode": 1,
  "resultData": {
    "TravelGuide": [
      { somedata }, { somedata }, ...
    ]
  }
}

* ngFor的标记如下：

<div *ngFor="let travelguide of responseData.resultData.TravelGuide">
  {{ travelguide.Category }}
</div>

Answer 4

试试这个

<div *ngFor="let travelguide of travelGuides?.["TravelGuide"]">
 {{travelguide?.Category}}
 ....
</div>

在angular2

4 个答案: