这似乎很简单，但是以某种方式我没有让内部数组元素在Angular 2上执行ngFor循环。
我有如下的json数组，我需要遍历嵌套数组的响应数组中的可用“路由”。现在任何人都可以让我知道如何获得应该简单的路由，并且我正在尝试这样。routes= respondeJson [0] .routes或this.routes = resonseJson [0] [‘routes’]但没有运气。请帮助考虑我在Angular 2上的入门级别，或者说使用JSON。
[ { "routes": { "0": { "budget": 326, "toCity": "United States", "QuoteIds": [ 1, 2 ], "options": 2 }, "1": { "budget": 374, "toCity": "Thailand", "QuoteIds": [ 3, 4 ], "options": 2 }, "2": { "budget": 382, "toCity": "Singapore", "QuoteIds": [ 5, 6 ], "options": 2 }, "3": { "budget": 451, "toCity": "Taiwan", "QuoteIds": [ 7 ], "options": 1 }, "5": { "budget": 112, "toCity": "Turkey", "QuoteIds": [ 8 ], "options": 1 }, "6": { "budget": 314, "toCity": "Saudi Arabia", "QuoteIds": [ 9 ], "options": 1 }, "8": { "budget": 518, "toCity": "Indonesia", "QuoteIds": [ 10 ], "options": 1 }, "10": { "budget": 384, "toCity": "Hong Kong", "QuoteIds": [ 11, 12 ], "options": 2 }, "11": { "budget": 232, "toCity": "Qatar", "QuoteIds": [ 13 ], "options": 1 }, "22": { "budget": 254, "toCity": "Algeria", "QuoteIds": [ 14 ], "options": 1 }, "23": { "budget": 241, "toCity": "Kuwait", "QuoteIds": [ 15 ], "options": 1 }, "24": { "budget": 175, "toCity": "Israel", "QuoteIds": [ 16, 17 ], "options": 2 }, "25": { "budget": 266, "toCity": "Oman", "QuoteIds": [ 18, 19 ], "options": 2 }, "28": { "budget": 762, "toCity": "Argentina", "QuoteIds": [ 20, 21 ], "options": 2 }, "30": { "budget": 78, "toCity": "Iceland", "QuoteIds": [ 22 ], "options": 1 }, "37": { "budget": 327, "toCity": "Canada", "QuoteIds": [ 23, 24 ], "options": 2 }, "39": { "budget": 238, "toCity": "Iran", "QuoteIds": [ 25 ], "options": 1 }, "40": { "budget": 129, "toCity": "Cyprus", "QuoteIds": [ 26 ], "options": 1 }, "41": { "budget": 267, "toCity": "United Arab Emirates", "QuoteIds": [ 27, 28 ], "options": 2 }, "42": { "budget": 252, "toCity": "Lebanon", "QuoteIds": [ 29 ], "options": 1 }, "43": { "budget": 427, "toCity": "Iraq", "QuoteIds": [ 30 ], "options": 1 }, "50": { "budget": 142, "toCity": "Montenegro", "QuoteIds": [ 31 ], "options": 1 }, "55": { "budget": 418, "toCity": "Cuba", "QuoteIds": [ 32 ], "options": 1 }, "56": { "budget": 492, "toCity": "China", "QuoteIds": [ 33, 34 ], "options": 2 }, "57": { "budget": 444, "toCity": "India", "QuoteIds": [ 35 ], "options": 1 }, "62": { "budget": 477, "toCity": "Japan", "QuoteIds": [ 36, 37 ], "options": 2 }, "63": { "budget": 3377, "toCity": "Costa Rica", "QuoteIds": [ 38 ], "options": 1 }, "65": { "budget": 210, "toCity": "Georgia", "QuoteIds": [ 39 ], "options": 1 }, "66": { "budget": 391, "toCity": "Sri Lanka", "QuoteIds": [ 40, 41 ], "options": 2 }, "67": { "budget": 258, "toCity": "Russia", "QuoteIds": [ 42 ], "options": 1 }, "68": { "budget": 82, "toCity": "Poland", "QuoteIds": [ 43 ], "options": 1 }, "71": { "budget": 104, "toCity": "Finland", "QuoteIds": [ 44 ], "options": 1 }, "72": { "budget": 150, "toCity": "Austria", "QuoteIds": [ 45, 46 ], "options": 2 }, "73": { "budget": 68, "toCity": "Spain", "QuoteIds": [ 47 ], "options": 1 }, "75": { "budget": 106, "toCity": "Portugal", "QuoteIds": [ 48 ], "options": 1 }, "77": { "budget": 37, "toCity": "Romania", "QuoteIds": [ 49 ], "options": 1 }, "78": { "budget": 66, "toCity": "Sweden", "QuoteIds": [ 50 ], "options": 1 }, "79": { "budget": 77, "toCity": "Denmark", "QuoteIds": [ 51 ], "options": 1 }, "86": { "budget": 440, "toCity": "South Africa", "QuoteIds": [ 52, 53 ], "options": 2 }, "87": { "budget": 176, "toCity": "Morocco", "QuoteIds": [ 54, 55 ], "options": 2 }, "88": { "budget": 231, "toCity": "Serbia", "QuoteIds": [ 56 ], "options": 1 }, "89": { "budget": 279, "toCity": "Bosnia and Herzegovina", "QuoteIds": [ 57 ], "options": 1 }, "90": { "budget": 35, "toCity": "Italy", "QuoteIds": [ 58 ], "options": 1 }, "92": { "budget": 72, "toCity": "Hungary", "QuoteIds": [ 59 ], "options": 1 }, "93": { "budget": 155, "toCity": "Croatia", "QuoteIds": [ 60 ], "options": 1 }, "94": { "budget": 160, "toCity": "Malta", "QuoteIds": [ 61, 62 ], "options": 2 }, "95": { "budget": 163, "toCity": "Greece", "QuoteIds": [ 63, 64 ], "options": 2 }, "96": { "budget": 67, "toCity": "Ireland", "QuoteIds": [ 65 ], "options": 1 }, "97": { "budget": 60, "toCity": "Netherlands", "QuoteIds": [ 66 ], "options": 1 }, "98": { "budget": 68, "toCity": "Norway", "QuoteIds": [ 67 ], "options": 1 }, "99": { "budget": 71, "toCity": "Latvia", "QuoteIds": [ 68 ], "options": 1 }, "100": { "budget": 261, "toCity": "Belgium", "QuoteIds": [ 69 ], "options": 1 }, "101": { "budget": 60, "toCity": "Bulgaria", "QuoteIds": [ 70 ], "options": 1 }, "102": { "budget": 130, "toCity": "Switzerland", "QuoteIds": [ 71 ], "options": 1 }, "103": { "budget": 140, "toCity": "Ukraine", "QuoteIds": [ 72 ], "options": 1 }, "104": { "budget": 72, "toCity": "France", "QuoteIds": [ 73 ], "options": 1 }, "105": { "budget": 56, "toCity": "Lithuania", "QuoteIds": [ 74 ], "options": 1 }, "106": { "budget": 51, "toCity": "United Kingdom", "QuoteIds": [ 75 ], "options": 1 }, "109": { "budget": 116, "toCity": "Czech Republic", "QuoteIds": [ 76 ], "options": 1 }, "110": { "budget": 59, "toCity": "Germany", "QuoteIds": [ 77 ], "options": 1 }, "113": { "budget": 272, "toCity": "Bahrain", "QuoteIds": [ 78, 79 ], "options": 2 }, "128": { "budget": 634, "toCity": "New Zealand", "QuoteIds": [ 80 ], "options": 1 }, "147": { "budget": 610, "toCity": "Australia", "QuoteIds": [ 81 ], "options": 1 }, "167": { "budget": 187, "toCity": "Moldova", "QuoteIds": [ 82 ], "options": 1 }, "168": { "budget": 87, "toCity": "Slovakia", "QuoteIds": [ 83 ], "options": 1 }, "175": { "budget": 119, "toCity": "Gibraltar", "QuoteIds": [ 84 ], "options": 1 }, "178": { "budget": 545, "toCity": "Laos", "QuoteIds": [ 85 ], "options": 1 } }, "misc": { "QuoteDateTime": "2017-04-21T13:56:00", "MinPrice": 326, "Direct": false, "QuoteId": 1, "skyLink": "http://partners.api.skyscanner.net/apiservices/referral/v1.0/AU/AUD/en-US/anywhere/amd/2017-05-18/2017-05-22?apiKey=wc161029621991497683276175998396" }, "price": [ 326, 392, 374, 434, 382, 470, 451, 112, 314, 518, 384, 553, 232, 254, 241, 175, 199, 422, 266, 1125, 762, 78, 403, 327, 238, 129, 290, 267, 252, 427, 142, 418, 492, 641, 444, 477, 937, 3377, 210, 713, 391, 258, 82, 104, 160, 150, 68, 106, 37, 66, 77, 624, 440, 176, 287, 231, 279, 35, 72, 155, 210, 160, 163, 200, 67, 60, 68, 71, 261, 60, 130, 140, 72, 56, 51, 116, 59, 374, 272, 634, 610, 187, 87, 119, 545 ], "outbound": { "DepartureDate": "2017-05-18T00:00:00", "Carrier": "WOW air", "DestinationId": "EWR", "OriginId": "LGW" }, "airline": [ "WOW air", "Lufthansa", "Gulf Air", "EVA Air", "Turkish Airlines", "British Airways", "Turkish Airlines", "Pegasus Airlines", "Pegasus Airlines", "Singapore Airlines", "Air India", "British Airways", "Pegasus Airlines", "Vueling Airlines", "Pegasus Airlines", "Pegasus Airlines", "Monarch", "Oman Air", "Turkish Airlines", "British Airways", "United", "WOW air", "Air Transat", "WestJet", "Pegasus Airlines", "Cobalt", "Royal Brunei ", "Turkish Airlines", "Pegasus Airlines", "Pegasus Airlines", "easyJet", "KLM", "Austrian Airlines", "British Airways", "Air India", "Alitalia", "British Airways", "Avianca", "Pegasus Airlines", "SriLankan Airlines", "Qatar Airways", "Pegasus Airlines", "Wizz Air", "Norwegian", "eurowings", "eurowings", "Vueling Airlines", "Monarch", "Blue Air", "Norwegian", "Norwegian", "Virgin Atlantic", "Ethiopian Airlines", "Iberia", "Thomson Airways", "Wizz Air", "Pegasus Airlines", "Flybe", "Wizz Air", "Monarch", "Air Malta", "easyJet", "Pegasus Airlines", "Aegean Airlines", "Aer Lingus", "Vueling Airlines", "Norwegian", "Wizz Air", "eurowings", "Wizz Air", "SWISS", "Ukraine International", "Vueling Airlines", "Wizz Air", "Flybe", "Flybe", "Flybe", "British Airways", "Pegasus Airlines", "Qatar Airways", "Royal Brunei ", "Wizz Air", "Wizz Air", "Monarch", "Singapore Airlines" ], "inbound": { "DepartureDate": "2017-05-22T00:00:00", "Carrier": "Norwegian", "OriginId": "JFK", "DestinationId": "LGW" } }, { "misc": { "QuoteDateTime": "2017-04-19T06:33:00", "MinPrice": 392, "Direct": true, "QuoteId": 2, "skyLink": "http://partners.api.skyscanner.net/apiservices/referral/v1.0/AU/AUD/en-US/anywhere/amd/2017-05-18/2017-05-22?apiKey=wc161029621991497683276175998396" }, "outbound": { "DepartureDate": "2017-05-18T00:00:00", "Carrier": "Lufthansa", "DestinationId": "EWR", "OriginId": "LHR" }, "inbound": { "DepartureDate": "2017-05-22T00:00:00", "Carrier": "Austrian Airlines", "OriginId": "EWR", "DestinationId": "LHR" } } ]
您在这里得到了一些不错的答案，但是所有人都在操纵您的响应并更改其构造，而不是按原样处理。您的响应中还有其他数据，并且希望保留这些数据，因此这是使用Pipe的解决方案。
You seem to have two objects in your array, but only one contains routes. Will this always be the case? If not, you might want to iterate the response and show all routes (if exists) for all objects, so I’d iterate the array first, and then iterate the routes:
routes
<!-- Iterate array --> <div *ngFor="let obj of jsonData"> <!-- iterate routes for each object using pipe --> <div *ngFor="let route of obj.routes | keys"> {{route.toCity}} </div> </div>
And then the keys pipe:
@Pipe({ name: 'keys', pure: false }) export class KeysPipe implements PipeTransform { transform(value: any, args?: any[]): any[] { // check if "routes" exists if(value) { // create instance vars to store keys and final output let keyArr: any[] = Object.keys(value), dataArr = []; // loop through the object, // pushing values to the return array keyArr.forEach((key: any) => { dataArr.push(value[key]); }); // return the resulting array return dataArr; } } }
This way you have not manipulated your response, and you have access to all other data that is coming with the response.
