* ngForとアクセスキー、オブジェクトの値を使用してjsonオブジェクトを表示する方法

データをionic 2に表示したいとします。 *ngForを使用するオブジェクトのキーおよび値にアクセスします。* ngForとアクセスキー、オブジェクトの値を使用してjsonオブジェクトを表示する方法

オブジェクトを*ngForを使用して動的に表示します。それを得る方法？

私はそのようなjsonデータを表示するには、Angular2を使用する開発者のための本当に一般的であろうと感じているので、この問題に簡単な解決策があります。

{ 
    "status": "success", 
    "products": { 
     "Admiranda": [ 
      { 
       "entity_id": "448", 
       "sku": "587", 
       "name": "# Adm Ape Maia EDT 50 ml 75009 (9)", 
       "image_url": "/path/media/catalog/product/cache/5/8/587.png", 
       "url_key": "/path/adm-ape-maia-edt-50-ml-75009-9", 
       "price": "15,000", 
       "symbol": "LBP ", 
       "qty": 0, 
       "rating": 0, 
       "wishlist": false, 
       "specialprice": "7,500", 
       "brand": "Admiranda" 
      }, 
      { 
       "entity_id": "435", 
       "sku": "571", 
       "name": "# Adm Aveng Liquid Soap 300ml 73680(3)", 
       "image_url": "/path/media/catalog/product/cache/5/7/571.png", 
       "url_key": "/path/adm-aveng-liquid-soap-300ml-73680-3", 
       "price": "5,000", 
       "symbol": "LBP ", 
       "qty": 0, 
       "rating": 0, 
       "wishlist": false, 
       "specialprice": "2,500", 
       "brand": "Admiranda" 
      } 
     ], 
     "Weider": [ 
      { 
       "entity_id": "306", 
       "sku": "386", 
       "name": "32 % Whey Wafer bar choco 35 g", 
       "image_url": "/path/media/catalog/product/cache/3/2/32_whey_wafer.png", 
       "url_key": "/path/32-whey-wafer-bar-choco-35-g", 
       "price": "5,910", 
       "symbol": "LBP ", 
       "qty": 0, 
       "rating": 0, 
       "wishlist": false, 
       "specialprice": "3,842", 
       "brand": "Weider" 
      }, 
      { 
       "entity_id": "337", 
       "sku": "650", 
       "name": "52% Protein Bar Cherry-Yog 50g", 
       "image_url": "/path/media/catalog/product/cache/5/2/52_protein_2.png", 
       "url_key": "/path/52-protein-bar-cherry-yog-50g", 
       "price": "6,819", 
       "symbol": "LBP ", 
       "qty": 0, 
       "rating": 0, 
       "wishlist": false, 
       "specialprice": "4,432", 
       "brand": "Weider" 
      } 
     ], 
     "Yoomi": [ 
      { 
       "entity_id": "303", 
       "sku": "638", 
       "name": "5oz feeding bottle+slow flow teat (2 of)", 
       "image_url": "/path/media/catalog/product/cache/6/3/638.png", 
       "url_key": "/path/5oz-feeding-bottle-slow-flow-teat-2-of", 
       "price": "30,909", 
       "symbol": "LBP ", 
       "qty": 0, 
       "rating": 0, 
       "wishlist": false, 
       "specialprice": "21,636", 
       "brand": "Yoomi" 
      } 
     ], 
     "Cosmetic products": [ 
      { 
       "entity_id": "519", 
       "sku": "736", 
       "name": "Bebble Body cream", 
       "image_url": "/path/media/catalog/product/cache/b/e/bebble_body_cream_175_ml.736_1.png", 
       "url_key": "/path/bebble-body-cream", 
       "price": "20,909", 
       "symbol": "LBP ", 
       "qty": 0, 
       "rating": 0, 
       "wishlist": false, 
       "specialprice": "10,455", 
       "brand": "Cosmetic products" 
      }, 
      { 
       "entity_id": "517", 
       "sku": "734", 
       "name": "Bebble Body milk", 
       "image_url": "/path/media/catalog/product/cache/b/e/bebble_body_milk_200_ml.734.png", 
       "url_key": "/path/bebble-body-milk", 
       "price": "18,182", 
       "symbol": "LBP ", 
       "qty": 0, 
       "rating": 0, 
       "wishlist": false, 
       "specialprice": "9,091", 
       "brand": "Cosmetic products" 
      } 
     ], 
     "Dialfa": [ 
      { 
       "entity_id": "483", 
       "sku": "184", 
       "name": "Dialfa HK LipStick Amber 1955 (3)", 
       "image_url": "/path/media/catalog/product/cache/4/_/4_1.png", 
       "url_key": "/path/dialfa-hk-lipstick-amber-1955-3", 
       "price": "4,500", 
       "symbol": "LBP ", 
       "qty": 0, 
       "rating": 0, 
       "wishlist": false, 
       "specialprice": "2,250", 
       "brand": "Dialfa" 
      }, 
      { 
       "entity_id": "495", 
       "sku": "323", 
       "name": "Dlf Lip Balm Cindrella 0859 (3)", 
       "image_url": "/path/media/catalog/product/cache/1/2/12.png", 
       "url_key": "/path/dlf-lip-balm-cindrella-0859-3", 
       "price": "4,500", 
       "symbol": "LBP ", 
       "qty": 0, 
       "rating": 0, 
       "wishlist": false, 
       "specialprice": "2,250", 
       "brand": "Dialfa" 
      }, 
      { 
       "entity_id": "503", 
       "sku": "368", 
       "name": "DLF Baby Kitty Sham&Dush250ml0552(8)", 
       "image_url": "/path/media/catalog/product/cache/h/k/hk_368.png", 
       "url_key": "/path/dlf-baby-kitty-sham-dush250ml0552-8", 
       "price": "6,000", 
       "symbol": "LBP ", 
       "qty": 0, 
       "rating": 0, 
       "wishlist": false, 
       "specialprice": "3,000", 
       "brand": "Dialfa" 
      }, 
      { 
       "entity_id": "506", 
       "sku": "397", 
       "name": "DLF Bagno Guanto Sponge WTP 0044 (5)", 
       "image_url": "/path/media/catalog/product/cache/3/9/397.png", 
       "url_key": "/path/dlf-bagno-guanto-sponge-wtp-0044-5", 
       "price": "8,000", 
       "symbol": "LBP ", 
       "qty": 0, 
       "rating": 0, 
       "wishlist": false, 
       "specialprice": "4,000", 
       "brand": "Dialfa" 
      } 
     ], 
     "Nevella": [ 
      { 
       "entity_id": "277", 
       "sku": "118", 
       "name": "Nevella Probiotics 100 Tabs", 
       "image_url": "/path/media/catalog/product/cache/n/e/nevella2.png", 
       "url_key": "/path/nevella-probiotics-100-tabs", 
       "price": "5,139", 
       "symbol": "LBP ", 
       "qty": 0, 
       "rating": 0, 
       "wishlist": false, 
       "specialprice": "4,111", 
       "brand": "Nevella" 
      }, 
      { 
       "entity_id": "280", 
       "sku": "159", 
       "name": "Nevella Probiotics 2,000 Sachets", 
       "image_url": "/path/media/catalog/product/cache/u/n/untitled_1.png", 
       "url_key": "/path/nevella-probiotics-2-000-sachets", 
       "price": "103,637", 
       "symbol": "LBP ", 
       "qty": 0, 
       "rating": 0, 
       "wishlist": false, 
       "specialprice": "103,637", 
       "brand": "Nevella" 
      } 
     ], 
     "Medi Baby": [ 
      { 
       "entity_id": "549", 
       "sku": "778", 
       "name": "Wet Wipes Medi Baby 100 pcs", 
       "image_url": "/path/media/catalog/product/cache/7/7/778.png", 
       "url_key": "/path/wet-wipes-medi-baby-100-pcs", 
       "price": "3,500", 
       "symbol": "LBP ", 
       "qty": 0, 
       "rating": 0, 
       "wishlist": false, 
       "specialprice": "2,625", 
       "brand": "Medi Baby" 
      } 
     ] 
    } 
}

出典

2016-11-08 mahmoudismail

はhttp://stackoverflow.com/questions/38554562/how-can-i-use-ngfor-to-iterate-over-typescript-enum-as-an-array-of-strings/ような音38554580＃38554580 –

最初

@Pipe({ 
    name: 'objectValues' 
}) 
export class ObjectValuesPipe implements PipeTransform { 
    transform(obj: any) { 
    let result = []; 
    for (var key in obj) { 
     if (obj.hasOwnProperty(key)) { 
     result.push(obj[key]); 
     } 
    } 
    return result; 
    } 
}

Pipe.tsが@NgModuleであなたのパイプをインポートすることを忘れないでください1本のパイプを書き、*ngforループでAdmiranda配列を印刷します、これ以上使えるのはp ipeこのように。

<ul *ngFor="let item of items"> <li *ngFor="let value of item | objectValues"> {{ value }} </li> </ul>

出典

2016-11-08 06:46:35

あなたの返答に感謝しますが、これ以上の詳細については、「イオン2」でパイプを使用する方法はありますか？ – mahmoudismail

イオン2角度2を使ってフードの下で、このパイプ私は角度2パイプとして使用できると思います。 app.module.tsファイルにパイプを含めるだけで、そのパイプをプロジェクトパイプシンボルのどこにでも使用できます。私はイオンについてのアイデアは持っていませんが、角度2については持っています。 –

私のテンプレートにこのパイプを使用すると「Uncaught Error：Template parse errors'が発生しました。 – mahmoudismail

* ngForとアクセスキー、オブジェクトの値を使用してjsonオブジェクトを表示する方法

答えて

関連する問題