代码之家  ›  专栏  ›  技术社区  ›  Raghav

图像SRC中管道的无返回可观察。

  •  0
  • Raghav  · 技术社区  · 8 年前

    我在应用程序中为image-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);
    
            }
          }
        }
    

    我面临的问题是 如果 管道代码中的循环不工作,正在返回空响应,并且图像没有为 其他的 部分。

    你能告诉我怎么返回相同的网址吗 “[SRC]=”我的对象?.url“ 当 其他的 在我的代码中满足条件的循环。

    1 回复  |  直到 8 年前
        1
  •  1
  •   Vikas RyanSand20    8 年前

    您正在返回 Observable 和一个 可观测的 只有当您 subscribe 为了它。 如果你想用 observables 直接在您需要的模板中 AsyncPipe

    异步管道 接受可观察的或承诺作为论据,要求 订阅或附加then处理程序,然后等待异步 结果,然后将其传递给调用方。

    修改后的代码

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