服务变量更新，但不在组件中更新

Question

我有这个变量，得到图像上传进度的记录，它显然工作，但在我的组件它保持未定义。

上传服务方法

uploadProfilePic(url:string, user_id:string, image:any) {
this.imgComp.compress(image)
.pipe(take(1))
.subscribe(compressedImage => {
try {
var formdata = new FormData();
formdata.append("profile_photo", compressedImage, compressedImage.name);
formdata.append("user_id", user_id);
this.http.put(url, formdata, { reportProgress: true, observe:'events' }).subscribe( event => {
if(event.type === HttpEventType.UploadProgress) {
this.upload_progress = Math.round(event.loaded / event.total * 100)
console.log(this.upload_progress)
} else if(event.type === HttpEventType.Response) {
this.toast.showToast(`Your profile pic has been updated!`)
//this.upload_progress = undefined
console.log(this.upload_progress)
//setTimeout(function(){ location.reload() }, 4000)
}      
})
} catch (error) {
this.toast.showToast(error.message)
}
})
}

我正在使用这个图像压缩服务，但我猜它真的不是什么可能导致问题的

上传服务构造函数

constructor(private http: HttpClient, public env: EnvService, private toast: Ion_Toast, private imgComp: ImageCompressorService) { }

然后在我的组件中调用它:

constructor(
private modalController: ModalController,
public imgUploader: ImageUploadService
) { }

在文档中显示:

<ion-progress-bar value="{{imgUploader.upload_progress/100}}"></ion-progress-bar>
<h1>{{imgUploader.upload_progress}}</h1>

我还检查了服务是否在app-module上，一切似乎都很好。

App-Module

providers: [
ImageUploadService
],

我不知道我是否应该在提供程序上声明压缩器，如果可能的话可以修复它。

编辑

我的输入没有直接使用上载方法，它首先使用了一个选择图像方法

ImageUploadService

upload_progress: number
selectProfilePic(event, user_id) {
this.uploadProfilePic(`${this.env.API_URL}/users/update_profile_image`, user_id, <File>event.target.files[0])
}

Answer 1

不应该直接访问组件中的服务值。也许这就是为什么它不起作用。

我可以建议另一种方法:在你的服务中使用一个你在组件中订阅的可观察对象。

的例子:

class Component {
uploadProgress: number;

constructor(
imgUploader: ImageUploadService
) {}
onUpload() {
this.imgUploader
.uploadProfilePic() // Must return an observable of the progress value
.subscribe(progress => (this.progress = progress));
}
}
class ImgUploaderService {
uploadProfilePic(url:string, user_id:string, image:any) {
const uploadProgress = new BehaviorSubject(0);

this.imgComp.compress(image)
.pipe(take(1))
// ... subscribe and update the progress in your behavior subject
return uploadProgress.asObservable();
}
}

关于行为学的一些帮助:https://rxjs-dev.firebaseapp.com/api/index/class/BehaviorSubject。你可能需要asObservable()、next()、error()和complete()方法。

如果不清楚或有任何问题，请提出来。