Observable.of ничего не возвращает для трубы в образе src - PullRequest
Новая
       10

Observable.of ничего не возвращает для трубы в образе src

0 голосов
/ 25 июня 2018

Я создал пользовательский канал для изображения 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 part.

Можете ли вы дать мне знать, как вернуть тот же URL-адрес, который был для "[src] =" myobject? .URL ", когда else цикл условия выполняется в моем коде.

1 Ответ

0 голосов
/ 25 июня 2018

Вы возвращаете Observable, а экземпляр Observable начинает публиковать значения только тогда, когда вы subscribe к нему. если вы хотите использовать observables непосредственно в шаблоне, вам нужно AsyncPipe

AsyncPipe принимает в качестве аргумента наблюдаемое или обещание, вызывает подписаться или присоединить обработчик затем, затем ждет асинхронного результат, прежде чем передать его вызывающей стороне.

Модифицированный код 

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