Observable.of 不为图像 src 中的管道返回任何内容答案

【问题标题】：Observable.of return nothing for pipe in image srcObservable.of 不为图像 src 中的管道返回任何内容
【发布时间】：2018-12-04 09:40:34
【问题描述】：

我在我的应用程序中为图像 src 制作了一个自定义管道：

它被用在这样的选择器上：

<img [src]="myobject?.URL | secure" />

管道的代码是：

    import { Pipe, PipeTransform } from '@angular/core';
    import { Http, ResponseContentType } from '@angular/http';
    import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
    import { Observable } from 'rxjs/Observable';
    import 'rxjs/add/observable/of';

    @Pipe({
      name: 'secure'
    })
    export class SecurePipe implements PipeTransform {

      constructor(private http: Http, private sanitizer: DomSanitizer) { }

      transform(url): Observable<SafeUrl> {

        if (//myboolcondition) {
          return this.http
            .get(url, { responseType: ResponseContentType.Blob })
            .catch(err => Observable.throw(err))
            .map(val => this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(val)));
        }
        else {
          // This is not working and the image src are blank 
// My goal in this else loop is just to return what was there originally // in [src]="myobject?.URL in selector

          return Observable.of(url);

        }
      }
    }

我面临的问题是管道代码中的 if 循环的 else 部分不起作用并且返回空响应并且图像没有为 else 呈现 部分。

您能否让我知道如何在条件的 else 循环时返回与 "[src]="myobject?.URL" 相同的 url在我的代码中遇到了。

【问题讨论】：

标签： javascript angular typescript ionic-framework ionic2

【解决方案1】：

您正在返回一个Observable，并且一个Observable 实例仅在您向它subscribe 时才开始发布值。如果你想在你的模板中直接使用observables，你需要AsyncPipe

AsyncPipe 接受 observable 或 promise 作为参数，调用订阅或附加一个 then 处理程序，然后等待异步传递给调用者之前的结果。

修改后的代码

  <img [src]="myobject?.URL | secure | async" />

【讨论】：