如何从 api 中获取基于 angular 5 的密钥的 img url？

Question

我正在使用 angular 5. 我在下面写了 http.get 方法从 api 中获取数据 angular 5. 我想得到 url 图像以在我的滑块中使用它。

getImages(){
    this.httpclient.get('blabla/banner.php').subscribe((result) => {
    this.images = result;
    console.log(this.images);
})
}

但我从 api 获取数据，下面的 ID 是我的回复

{  
   status:"success",
   …
}img:[  
   {  
      id:"1",
      banner:"/upload/img.jpg"
   },
   …
]0:{  
   id:"1",
   banner:"pload/img.jpg"
}1:{  
   id:"2",
   banner:"load/img2.jpg"
}2:{  
   id:"3",
   banner:"/admin/upload/img3.jpg"
}status:"success"

这是我的 html 模板。不知道是对是错。

<div class="container">
    <div class="row">
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
          <button ></button>
            <li   data-target="#myCarousel" data-slide-to="2"></li>
          </ol>
          <!-- Wrapper for slides -->
          <div class="carousel-inner">
            <div class="item active" *ngFor="let image of images">
              <img src="{{image.banner}}">
            </div>

         <!--    <div class="item">
              <img src="http://asianstylemagazine.com/wp-content/uploads/2016/04/housefull-1.jpg" alt="Chicago">
            </div>

            <div class="item">
              <img src="https://www.artsfon.com/large/201705/97685.jpg" alt="New York">
            </div>
          </div> -->

          <!-- Left and right controls -->
          <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
    </div>
</div>

我在使用 result.img 后得到了这个

我是 angular 的初学者，请帮忙。谢谢。

Answer 1

在 ts 中取下面给出的对象，

getImages(){
this.httpclient.get('blabla/banner.php').subscribe((result) => {
this.images = result.img; // store the img array in this.images
 })
}

images 变量将包含 img 数组。现在转到您的模板并使用 *ngFor

示例：-

<div *ngFor="let image of images">
   <img src="{{image.banner}}" alt="banners">
</div>

ngFor 中的图像将遍历您的数组 img 并获取所有 url。

希望对您有所帮助

Answer 2

您需要确保获得正确的数据

getImages(){
    this.httpclient.get('blabla/banner.php').subscribe((result : any) => {
    this.images = result.img;
})
}

此外，在您的旋转木马中，您需要确保只有一个项目在开始时处于活动状态（目前，所有项目都有 active class）

<div class="item" [ngClass]="{'active': i==0}" *ngFor="let image of images; let i = index">

如何从 api 中获取基于 angular 5 的密钥的 img url？

How to get img url from api which is key based in angular 5?

javascript

angular

angular-httpclient