在angular2中使用*ngFor进行迭代时出错

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

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

连续呼叫

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

为TravelGuide分配响应

.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"
      }
    ]
  }
}

这是我要尝试的

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

也试过

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

---

假设

TravelGuide

是异步分配的，您的代码应该如下

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

{{travelguide？.Category}

有关安全导航操作员（？）的更多信息：

或

{{travelguide.Category}

我认为如果您将整个响应分配给TravelGuide，应该是

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

和

HTML

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

{{travelguide？.Category}

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

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

*ngFor的标记如下所示：

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

{{travelguide.Category}

试试这个

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

{{travelguide？.Category}
....

如何分配旅行指南，显示代码填充旅行的服务呼叫在哪里guides@NikhilRadadiya检查answer@RahulSingh有问题的请查收。subscribe@NikhilRadadiya我想知道您对http getI的调用，我不能因为resultData有两个数组

TravelGuide

和

TravelGuide\u Img

，如果可能的话，我希望它们位于相同的分区中如果我使用

this.travelGuides=travelGuides.resultData.TravelGuide，则将其保存在同一个div上

和

this.travelGuide\u Imgs=travelGuides.resultData.travelGuide\u Img是的，您可以使用与其父级相同长度的doBut inner*NgFor迭代
<div *ngFor="let travelguide of travelGuides?.TravelGuide">
 {{travelguide?.Category}}
</div>

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

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

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