Question

这是我的component.ts，在加载时，我从api中获取数据，我可以在console.log中看到它，实际上是获取了10个对象的数组（它们在api上以10个为一组））。我在API中为10数组中的第一张图片的源代码提供了正确的路径，我键入了正确的路径以使用data.hits.hits [n] ._ source.images [ n] .urls.original。但是，当我尝试将其放在角度时，由于它不在范围内，因此无法读取当前的数据值，但是我无法弄清楚如何以更好的方式写它。

import { Component, OnInit } from '@angular/core';
import { ConfigService } from '../../config.service';
import { Observable } from 'rxjs';


@Component({
  selector: 'app-property-binding',
  templateUrl: './property-binding.component.html',
  styleUrls: ['./property-binding.component.css']
})
export class PropertyBindingComponent implements OnInit {

  private isHidden : boolean;

  public zeroImage : string;

  private Photos : Observable<Object>;

  constructor(private configService: ConfigService) { }

  ngOnInit() {
    //doing the API call
    this.Photos = this.configService.getConfig();
    this.Photos.subscribe((data) => console.log(data));
  }


  toggle() : void {
    this.isHidden = !this.isHidden;

    if(this.isHidden){

      //var zeroImg = document.createElement("img");

      this.zeroImage.src = data.hits.hits[0]._source.images[0].urls.original;


    }
  }
}

这里是Angular html页面，该页面应该属性将src与我想要的变量绑定。

<p>
  View Artworks
</p>
<button class="btn btn-info" (click)="toggle()">Show Artwork</button>
<div class="col-md-4" *ngIf="isHidden">
  <img [src]="zeroImage">
</div>

这是我拥有调用API的方法的服务方法

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { HttpHeaders } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ConfigService {

  private httpOptions = {
    headers: new HttpHeaders({
      'ApiKey': '37dd07f19435cb72c14e0347ae4cc556e351d9503f0d39025011da7525fa83bb'
    })
  };

  private configUrl = 'https://api.art.rmngp.fr/v1/works';

  constructor(private http: HttpClient) { }

  getConfig(){
    let obs = this.http.get(this.configUrl, this.httpOptions)

    console.log("Inside the getConfig method, before subscribe, doing API call" + 
    obs);

    //might not need to subscribe here??
    //obs.subscribe((response) => console.log(response))
    return obs;
    //return this.http.get(this.configUrl, this.httpOptions);
  }
}

还有一些不相关的代码，这是我在Angular外部编写代码的正常http / javascript，效果很好。

function displayPhoto(){

        fetch('https://api.art.rmngp.fr/v1/works/, {headers: {ApiKey: "37dd07f19435cb72c14e0347ae4cc556e351d9503f0d39025011da7525fa83bb"}})
        .then(function(response){
            return response.json();
        })
        .then(function(data){   
            document.getElementById("zeroImg").src = data.hits.hits[0]._source.images[0].urls.original;

同样，Angular中的API调用工作正常，我可以看到我成功提取了数据，但是我无法将图像设置为数据集中的第一个图像，并且一直在努力。任何帮助都会帮助

Answer 1

您订阅时对数据不做任何操作

this.Photos.subscribe((data) => console.log(data));

您对此处的数据没有做任何事情。

zeroImg.src = data.hits.hits[0]._source.images[0].urls.original;

zeroImg是一个字符串，在其上设置src属性没有意义，并且数据在该点处未定义。订阅函数中唯一有数据变量的地方，但此处不可用。

以下内容将设置图片的src

this.Photos.subscribe((data) => {
    this.zeroImg = data.hits.hits[0]._source.images[0].urls.original;
});

使用切换功能只需切换isHidden标志并清除其余部分即可。

  ngOnInit() {
    //doing the API call
    this.Photos = this.configService.getConfig();
    this.Photos.subscribe((data) => {
      this.zeroImg = data.hits.hits[0]._source.images[0].urls.original;
    });
  }

  toggle() : void {
    this.isHidden = !this.isHidden;
  }

从Angular7中的API添加src

1 个答案: