Обработка Promise и Observable для одной и той же переменной в Node.js & Angular - PullRequest
Новая
       71

Обработка Promise и Observable для одной и той же переменной в Node.js & Angular

0 голосов
/ 11 октября 2018

В моем проекте у меня есть изображение.

При инициализации;Я загружаю его из Promise<string>;где строка - это URL-адрес изображения

Затем я использую пакет узлов, чтобы изменить и обрезать изображение.Он запрашивает изображение, обрезает его до требуемого размера и возвращает Observable<anObject>, где anObject.base64 - это представление base64 обрезанного изображения.Он содержится в диалоговом окне.

Я пробовал много разных вещей, но не смог автоматически изменить изображение тега <img>.

Вот моя последняя настройка: 

image: Observable<string>;
...

ngOnInit() {

    ...

    prd.images.big.then(img => {
        this.image = of(img);
    });
    // prd.images.big is a Promise<string>

    ...
}


showImageDialog() {
    this.image = this.imageDialog.openDialog().pipe(
        map(data => {
            return data.base64;
        })
    );
}

И мой шаблон: .... 

<a style="cursor: pointer" (click)="showImageDialog();">
    <img [src]="(image | async) || 'an url to default image'"/>
</a>

....

Странная вещь, изображение не меняется автоматически, но когда я нажимаю на изображение снова, оно меняется.

Я надеюсь, что любой изВы можете помочь достичь этого.Спасибо.

Ответы [ 2 ]

0 голосов
/ 11 октября 2018

Вы хотите избежать повторного назначения наблюдаемого после его создания.Попробуйте что-то вроде этого: 

image: Subject<string>;
...

ngOnInit() {

    this.image = new ReplaySubject<string>(1);

    prd.images.big.then(img => this.image.next(img));
}

showImageDialog() {
    this.imageDialog.openDialog().subscribe(data => {
       const dataUrl = `data:image/jpeg;base64,${data.base64}`;
       this.image.next(dataUrl);
    });
}

К вашему сведению, субъект - это просто переменная, которая действует как наблюдатель и наблюдаемая - вы можете подписать или передать операции из нее, как любая наблюдаемая, и вы также можете вручную поместить значения в темуэто будет затем наблюдаться всеми подписчиками.В приведенном выше коде я использовал особый вид темы, которая будет воспроизводить последнее значение для любых поздних подписчиков на тот случай, если вы введете значение до того, как представление успеет подписаться.

0 голосов
/ 11 октября 2018

Вы в настоящее время назначаете подписку на this.image.Вместо этого установите this.image равным data.base64, возвращаемому внутри вашей функции карты.Если вы хотите использовать байты изображения в кодировке base64 для тега изображения, вам нужно использовать URL-адрес данных

Если ваш тип изображения jpeg: <img src="data:image/jpeg;base64,{{image}}"/>

...