角度2のカルーセルスライダーにJsonデータを表示するにはどうすればよいですか？

私はJsonのAPIからデータを取得しています。私はCarouselスライダーにデータを表示したい。私は表示するために最善を尽くしましたが、結果は見つかりませんでした。私は表示するのに使用されるでInterpolation {{}}記号を知ってangular 2.で新しいですが、私はここで理解するためにデータを追加私のHTMLファイルです：角度2のカルーセルスライダーにJsonデータを表示するにはどうすればよいですか？

<div class="carousel slide media-carousel" id="media2"> 
         <div class="carousel-inner"> 

          <div class="item active"> 
           <div class="row col-md-12" style="padding: 0px;"> 
            <div class="col-md-3 text-center slider_Itm"> 
             <div style="height: 160px; width: 264px; background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), rgba(0,0,0,0.2) url('app/images/Assets/mob1.png') no-repeat center;"> 
             </div> 
             <div class="slider_cntnt" style="margin-left: 0px"> 
              <p class="slider_Prod_name">Iphone</p> 
               <p class="slider_Prod_city">RS 26,000</p> 
               <p class="slider_Prod_price">Lahore</p> 
             </div> 
            </div> 
            <div class="col-md-3 text-center slider_Itm"> 
             <div style="height: 160px; width: 264px; background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), rgba(0,0,0,0.75) url('app/images/Assets/mob2.png') no-repeat center;color: white;font-family: 'Montserrat'; font-weight: 400; font-size: 11px;line-height: 26px;"> 

              <div style="padding-top: 30px;">Qualcomm Snapdragon 801</div> 
              <div>2.3 GHz Quad-core CPU</div> 
              <div>5.0" Corning Gorilla Glass</div> 
              <div>3GB RAM/16GB ROM</div> 

             </div> 
             <div class="slider_cntnt" style="margin-left: 0px"> 
              <p class="slider_Prod_name">IPHONE 5S</p> 
              <p class="slider_Prod_city">RS 26,000</p> 
              <p class="slider_Prod_price">Lahore</p> 
             </div> 
            </div> 
            <div class="col-md-3 text-center slider_Itm"> 
             <div style="height: 160px; width: 264px; background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), rgba(0,0,0,0.2) url('app/images/Assets/mob1.png') no-repeat center;"> 
             </div> 
             <div class="slider_cntnt" style="margin-left: 0px"> 
              <p class="slider_Prod_name">IPHONE 5S</p> 
              <p class="slider_Prod_city">RS 26,000</p> 
              <p class="slider_Prod_price">Lahore</p> 
             </div> 
            </div> 
            <div class="col-md-3 text-center slider_Itm"> 
             <div style="height: 160px; width: 264px; background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), rgba(0,0,0,0.2) url('app/images/Assets/mob1.png') no-repeat center;"> 
             </div> 
             <div class="slider_cntnt" style="margin-left: 0px"> 
              <p class="slider_Prod_name">IPHONE 5S</p> 
              <p class="slider_Prod_city">RS 26,000</p> 
              <p class="slider_Prod_price">Lahore</p> 
             </div> 
            </div> 
           </div> 
          </div> 

          <div class="item"> 
           <div class="row col-md-12" style="padding: 0px;"> 
            <div class="col-md-3 text-center slider_Itm"> 
             <div style="height: 160px; width: 264px; background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), rgba(0,0,0,0.2) url('app/images/Assets/mob1.png') no-repeat center;"> 
             </div> 
             <div class="slider_cntnt" style="margin-left: 0px"> 
              <p class="slider_Prod_name">IPHONE 5S</p> 
              <p class="slider_Prod_city">RS 26,000</p> 
              <p class="slider_Prod_price">Lahore</p> 
             </div> 
            </div> 
            <div class="col-md-3 text-center slider_Itm"> 
             <div style="height: 160px; width: 264px; background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), rgba(0,0,0,0.75) url('app/images/Assets/mob2.png') no-repeat center;color: white;font-family: 'Montserrat'; font-weight: 400; font-size: 11px;line-height: 26px;"> 

              <div style="padding-top: 30px;">Qualcomm Snapdragon 801</div> 
              <div>2.3 GHz Quad-core CPU</div> 
              <div>5.0" Corning Gorilla Glass</div> 
              <div>3GB RAM/16GB ROM</div> 

             </div> 
             <div class="slider_cntnt" style="margin-left: 0px"> 
              <p class="slider_Prod_name">IPHONE 5S</p> 
              <p class="slider_Prod_city">RS 26,000</p> 
              <p class="slider_Prod_price">Lahore</p> 
             </div> 
            </div> 
            <div class="col-md-3 text-center slider_Itm"> 
             <div style="height: 160px; width: 264px; background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), rgba(0,0,0,0.2) url('app/images/Assets/mob1.png') no-repeat center;"> 
             </div> 
             <div class="slider_cntnt" style="margin-left: 0px"> 
              <p class="slider_Prod_name">IPHONE 5S</p> 
              <p class="slider_Prod_city">RS 26,000</p> 
              <p class="slider_Prod_price">Lahore</p> 
             </div> 
            </div> 
            <div class="col-md-3 text-center slider_Itm"> 
             <div style="height: 160px; width: 264px; background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), rgba(0,0,0,0.2) url('app/images/Assets/mob1.png') no-repeat center;"> 
             </div> 
             <div class="slider_cntnt" style="margin-left: 0px"> 
              <p class="slider_Prod_name">IPHONE 5S</p> 
              <p class="slider_Prod_city">RS 26,000</p> 
              <p class="slider_Prod_price">Lahore</p> 
             </div> 
            </div> 
           </div> 
          </div> 

         </div> 
         <a data-slide="prev" href="#media2" class="left carousel-control" style="background: transparent; color: #1b99e3; opacity: 1;"><span class="glyphicon glyphicon-chevron-left" style="top: 10px; left: 11px;"></span></a> 
         <a data-slide="next" href="#media2" class="right carousel-control" style="background: transparent; color: #1b99e3; opacity: 1;"><span class="glyphicon glyphicon-chevron-right" style="top: 10px; left: 0px;"></span></a> 
        </div> 



{ 
"error": "TheErrorData", 
"body": "helloworld", 
"data": [{ 
     "Brand_id": 0, 
     "Brand_name": "Samsung", 
     "id":0 
    }, 
    { 
     "Brand_id": 1, 
     "Brand_name": "QMobile", 
     "id":1 
    }, 
    { 
     "Brand_id": 2, 
     "Brand_name": "Nokia", 
     "id":0 
    }, 
    { 
     "Brand_id": 3, 
     "Brand_name": "Huawei", 
     "id":1 
    }, 
    { 
     "Brand_id": 4, 
     "Brand_name": "Acer", 
     "id":0 
    } 
]

}

タイプのスクリプトファイル。

indexmobileshelf = []; 

constructor(private _employeelist : SubServices){ 
} 
ngOnInit() 
{ 
    this._employeelist.MobileShelf()   
    .subscribe(data => this.indexmobileshelf = data); 
}

は私が... serviveが、私はカルーセルスライダーで表示するには、このデータを使用 indexmobileshelfにMobileShelf NAMR finction（）戻りJSONデータを持つ私のタイプのスクリプトファイルから呼び出しがあるファイルを追加しました。親切

出典

2017-08-01 Muhammad wajih

を私を助けて、あなたはすべての繰り返しの要素

用ループ* ngForを使用することができますが、アレイの項目を表示するとします。あなたのコードはちょっと読みにくいです。あなたはそのコンセプトを理解し、それに応じて適用することができます。

<div class="col-md-3 text-center slider_Itm" *ngFor="let mobile of indexmobileshelf"> 
    <div style="height: 160px; width: 264px; background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), rgba(0,0,0,0.2) url('app/images/Assets/mob1.png') no-repeat center;"></div> 
     <div class="slider_cntnt" style="margin-left: > 
      <p class="slider_Prod_name">{{mobile.Brand_id}} 
      <p class="slider_Prod_city">{{mobile.Brand_name}}</p> 
      <p class="slider_Prod_price">{{mobile.somethingelse}}</p> 
     </div> 
    </div> 
</div>

出典

2017-08-01 06:23:46

私もループを使用していますが、問題はすべてのデータを1つのカルーセルに表示するということです。ループを使用して各カルーセルにデータを表示するにはどうすればよいですか。（https://i.stack.imgur.com/EjqTd.png） –

角度2のカルーセルスライダーにJsonデータを表示するにはどうすればよいですか？

答えて

関連する問題