在 angular2 中使用 *ngFor 迭代时出错答案

【问题标题】：Error while iterating with *ngFor in angular2在 angular2 中使用 *ngFor 迭代时出错
【发布时间】：2017-11-08 08:10:53
【问题描述】：

我有 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 我正在尝试

 <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

【问题讨论】：

如何分配旅游指南，显示代码
旅行指南中的服务调用在哪里
@NikhilRadadiya 检查答案
@RahulSingh 添加有问题请查看 .subscribe
@NikhilRadadiya 我想知道你对 http get 的调用

标签： angular ngfor

【解决方案1】：

我认为，如果您将整个响应分配给 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>

【讨论】：

我不能让 resultData 在同一个 div 中有两个数组 TravelGuide 和 TravelGuide_Img
如果我使用this.travelGuides = travelGuides.resultData.TravelGuide; 和this.travelGuide_Imgs = travelGuides.resultData.TravelGuide_Img;，是否可以在同一个div上迭代它
是的，你可以做到
但内部 *NgFor 迭代的长度与其父级相同

【解决方案2】：

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

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

*ngFor 的标记如下所示：

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

【讨论】：

【解决方案3】：

假设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>

【讨论】：

【解决方案4】：

试试这个

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

【讨论】：