Question

我想显示一个我从名为“ pick”的api获取的图像列表，使用http请求在角度4可以正常工作，什么是使用角度6的正确方法：

   pagePhoto:any;

   onSearch(dataForm){
       this.http.get("https://pixabay.com/api/?key=10727287-66f9e40c95980a4fc92c26b12&q="+dataForm.motCle+"&per_page=5&page=1")
       .map(resp=>resp.json())
       .subscribe(data=>{
               this.pagePhoto=data;
       });  
   }

我已导入：import {Http} from "@angular/http";

并在构造函数中传递了private http:Http

在我的组件中，我使用ngFor显示img：

<div *ngFor="let p of pagePhoto?.hits" class="col-md-3 ">
    <div class="panel panel-primary cadre">
        <div class="panel-heading">{{p.tags}}</div>
        <div class="panel-body">
          <div>
            <p>User : {{p.user}}</p>
          </div>
          <img src="{{p.previewURL}}" >
        </div>
    </div>
  </div>

Answer 1

您还需要切换到 HttpClient 而不是 Http 并删除 .map(resp=>resp.json()) 并进行编码看起来像

this.http.get("https://pixabay.com/api/?key=10727287-66f9e40c95980a4fc92c26b12&q="+dataForm.motCle+"&per_page=5&page=1")
       .subscribe(data=>{
               this.pagePhoto=data;
 });

和

import {HttpClient} from "@angular/http";

使用调用png API的http请求在Angular 6中显示图像

1 个答案: