Fehler beim mit * ngFor Iterieren in angular2

Ich habe json Antwort wie, Im Versuch, über Json Antwort auf iterieren aber es gibt FehlerFehler beim mit * ngFor Iterieren in angular2

Ich weiß nicht, ob angular2 Iteration nicht wie diese suport als ich m neue

serive Anruf

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

zuordnen Antwort auf Reiseführern

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

angular

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

hier ist * ngFor im

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

aber immer diese

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

auch versucht

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

versuchen

für diesen Fehler bekommen

Cannot read property 'TravelGuide' of undefined

Quelle

2017-06-07 Nikhil Radadiya

, wie Sie Reiseführern zuweisen kann, zeigen Sie den Code – Sajeetharan

wo ist der Service-Anruf, der Reiseführer –

@NikhilRadadiya füllt überprüfen Sie die Antwort – Sajeetharan

travelGuides Unter der Annahme, asynchron zugewiesen wird, sollte der Code wie sein

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

Weitere Informationen über sichere Navigation Operator (?): Why we use "?" operator in template binding in angular 2

oder

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

Quelle

2017-06-07 06:10:51 echonax

Ich dünn k, wenn Sie die ganze Antwort auf Reiseführern zuweisen, sollte es sein,

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

EDIT

Ändern der Zuweisungsteil wie

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

und HTML

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

Quelle

2017-06-07 06:11:39 Sajeetharan

hinzugefügt Ich kann nicht verursachen ResultData haben 2 Arrays 'TravelGuide' und' TravelGuide_Img', die ich im selben div wollen –

Ist es möglich, es auf demselben div zu iterieren, wenn ich this.travelGuides = travelGuides.resultData verwende. Reiseführer; 'Und ' this.travelGuide_Imgs = travelGuides.resultData.TravelGuide_Img; ' –

ja Sie – Sajeetharan

Wenn Ihr Komponentenmodell etwas wie folgt aussieht:

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

Ihr Markup für * ngFor würde wie folgt aussehen:

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

Quelle

2017-06-07 06:16:50

Versuchen Sie, diese

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

Quelle

2017-06-07 06:23:05

Fehler beim mit * ngFor Iterieren in angular2

Antwort

Verwandte Themen