如何在旋转木马滑块中以角度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数据呼叫。好心帮我出
答
可以使用循环* 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>
我也在使用循环，但问题是它显示了单个传送带中的所有数据。如何使用循环显示每个Carousel中的数据。 （https://i.stack.imgur.com/EjqTd.png） –