Question

我正在尝试检查在线图像的http状态代码以检查它是否已上传，我知道此代码不正确，有人可以告诉我如何更改它吗？

如果未正确加载图像，则显示备用图像，然后我想轮询URL，直到返回状态200，然后将图像源更改为URL。

  getImageUrlStatus(url: string) {
    return this.http.get(url).subscribe(response => this.response = response.toString());
  }

Answer 1

首先，您不能以您的方式返回订阅结果

getImageUrlStatus(url: string) {
   this.http.get(url).subscribe(
     response => this.response = response.toString(),
     error => this.response = this.mydefaultImageResponse );
}

Answer 2

为此使用Subject或BehaviorSubject。

假设您将在组件中使用imageUrl，则可以在服务中通过Observable<string>或Subject<string>公开BehaviorSubject<string>。您可以使用defaultImagePath对其进行初始化。

当您从API获得响应时，可以通过使用该值调用next方法来将新值向下推送。

这将转换为如下代码：

private imageUrl: BehaviourSubject<string> = new BehaviourSubject<string>(defaultImageResponse);
public imageUrl$: Observable<string> = this.imageUrl.asObservable();

...

getImageUrlStatus(url: string) {
  this.http.get(url)
    .subscribe(
      response => {
        const newImageResponse = response && response.toString();
        newImageResponse && this.imageUrl.next(newImageResponse);
      }
    );
}

您现在可以像这样在组件中使用此公共Observable：

在您的组件类中：

image$: Observable<string>;

constructor(private yourService: YourService) {}

ngOnInit () {
  this.image$ = this.yourService.imageUrl$;
}

在您的组件模板中：

<div>
  <img [src]="image$ | async" />
</div>

Angular 6-检查图片网址的http状态

2 个答案: