如何在旋轉木馬滑塊中以角度2顯示Json數據？

我得到Json來自API的數據。我想在Carousel滑塊中顯示數據。我盡力展示，但沒有找到結果。我是新的angular 2.我知道用來顯示Interpolation {{}}的跡象，但我添加數據的理解這是我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然後我使用該數據在轉盤滑塊顯示namr MobileShelf一個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

我也在使用循環，但問題是它顯示了單個傳送帶中的所有數據。如何使用循環顯示每個Carousel中的數據。（https://i.stack.imgur.com/EjqTd.png） –

如何在旋轉木馬滑塊中以角度2顯示Json數據？

回答

相關問題