在 Node.js 和 Angular 中处理同一变量的 Promise 和 Observable

Question

在我的项目中，我有一张图片。

初始化时；我从Promise<string> 加载它；其中 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>

....

奇怪的是，图像不会自动改变，但是当我再次点击图像时，它会改变。

我希望你们中的任何人都可以帮助实现这一目标。谢谢。

Answer 1

您当前正在为 this.image 分配订阅。相反，将 this.image 设置为 map 函数中返回的 data.base64。如果要对图像标签使用 base64 编码的图像字节，则需要使用 data URL

如果您的图像类型是 jpeg： <img src="data:image/jpeg;base64,{{image}}"/>

Answer 2

您希望避免在创建后重新分配 observable。试试这样的：

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);
    });
}

仅供参考，Subject 只是一个充当观察者和可观察对象的变量——您可以像任何可观察对象一样订阅或管道操作，您也可以手动将值放入主题中，然后所有订阅者都将观察到。在上面的代码中，我使用了一种特殊的主题，它将向任何迟到的订阅者重播最新的值，以防万一你在视图有时间订阅之前输入了一个值。