My journey with TypeScript and Angular 2 is just beginning.
I encountered an unusual issue with the Cordova Camera Plugin: it seems like callbacks are not properly connected to the rest of my component!
Below is a snippet of the code causing this problem:
result.component.ts
import {Component, OnInit} from "@angular/core";
@Component({
moduleId: module.id,
selector: 'app-result',
templateUrl: 'result.component.html'
})
export class ResultComponent implements OnInit {
pictureSource;
destinationType;
status = 0; //VALUE I WANT TO PRINT
constructor() {
this.pictureSource = navigator.camera.PictureSourceType;
this.destinationType = navigator.camera.DestinationType;
}
ngOnInit(): void {
}
test() {
console.log(this.status); //VALUE I PRINT
}
capturePicture() {
let cameraOptions = {
quality: 100,
destinationType: this.destinationType.FILE_URI
};
navigator.camera.getPicture(this.onCaptureSuccess, this.onCaptureFail, cameraOptions);
}
onCaptureSuccess(fileURI: string): void {
console.log(this.status); //THROW ERROR
}
onCaptureFail(error: string): void {
console.log('error', error);
}
}
result.component.html
<div>
<h1>Photo</h1>
<button (click)="capturePicture()">PHOTO</button>
<button (click)="test()">TEST</button>
</div>
Console output : https://i.sstatic.net/ZVhUL.png
Clicking on the TEST button works fine multiple times. However, after taking a photo using the PHOTO button and returning, the
'Cannot read property 'status' of null'TEST button a few more times, the status value appears...
It appears that the callbacks for navigator.camera.getPicture are somehow isolated from the component. How can we understand this behavior?