如何在角度2的輪播滑塊中顯示Json數據？

Question

我從API獲取Json數據。 我想在“ Carousel滑塊中顯示數據。 我盡力顯示但沒有找到結果。 我是angular 2.新手angular 2.我知道用來顯示Interpolation {{}}登錄，但是我添加了數據以便理解這是我的HTML文件：

<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，該腳本文件具有功能名稱MobileShelf（），該功能在indexmobileshelf中返回Json數據，然后使用此數據顯示在轉盤滑塊中。 請幫助我

Answer 1

您可以對所有重復元素使用循環* 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>