[英]Angular 2 async pipe on a function
我正在尝试从api获取base64。 以下代码可以正常工作。
private test = null;
ngOnInit() {
this.loadCustomers();
this.test = this.getSiteImage();
}
getSiteImage() {
return this.CustomerService.getCustomerSiteImage('test.com').share();
}
<img class="avatar avatar-xl" src="{{ (test | async)?.image }}" alt="">
但是我想使用一个函数。 当我将代码更改为以下内容时:
getSiteImage(url) {
return this.CustomerService.getCustomerSiteImage(url).share();
}
<img class="avatar avatar-xl" src="{{ (getSiteImage('test.com') | async)?.image }}" alt="">
我想知道为什么这行不通,以及如何正确实现这一目标。
- - - - -编辑:
将来帮助有同样问题的人。 就像@thinkinkingmedia建议的那样。 我将可观察对象放在以url为键的对象中。
我将getSiteImage(url)方法更改为:
getSiteImage(url) {
if (url in this.imageObservables) {
return this.imageObservables[url];
} else {
this.imageObservables[url] = this.CustomerService.getCustomerSiteImage(url).share();
return this.imageObservables[url];
}
}
它不起作用的原因是因为每当Angular检查表达式的更改时, async
都会获得一个新的可观察对象。
在第一个示例中:
{{ (test | async)?.image }}
Angular检查将属性test
的值传递给async
的表达式。 然后,Asycn订阅可观察对象并等待一个值。 在下一个检查周期中,Angular将相同的可观察变量传递给Async,并且Async不会进行任何更改,因为它已经订阅了。
在第二个示例中:
{{ (getSiteImage('test.com') | async)?.image }}
Angular检查调用创建可观察函数的表达式。 这被传递给异步,等待响应。 在下一个循环中,将重复此操作。 每次更改检测都会创建一个新的可观察值,并且异步永远不会有机会产生结果。 对于传递给异步的每个新可观察对象,它都退订到前一个。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.