I'm using a child component:
<app-photo-editor [addPhotoUrlExtension]="'users/add-photo'" [onUploadSuccess]="onUploadPhotoSuccess"
[deletePhoto]="onDeletePhoto"></app-photo-editor>
and passing it the onUploadPhotoSuccess function:
onUploadPhotoSuccess(response: any) {
if (response) {
const photo = JSON.parse(response);
this.member.photoUrl = photo.url; // offending line
...
On the child component, I accept the function, and invoke the parent's function:
export class PhotoEditorComponent implements OnInit {
@Input() onUploadSuccess: (response: any) => void;
...
this.uploader.onSuccessItem = (item, response, status, headers) => {
if (response) {
this.onUploadSuccess(response);
}
}
This gives an error on the offending line (marked above), saying:
core.js:6498 ERROR TypeError: Cannot set properties of undefined (setting 'photoUrl')
at PhotoEditorComponent.onUploadPhotoSuccess [as onUploadSuccess] (member-edit.component.ts:67:27)
at FileUploader.uploader.onSuccessItem (photo-editor.component.ts:60:14)
at FileUploader._onSuccessItem (ng2-file-upload.js:1326:1)
at XMLHttpRequest.xhr.onload [as __zone_symbol__ON_PROPERTYload] (ng2-file-upload.js:1073:29)
at XMLHttpRequest.wrapFn (zone.js:763:1)
at ZoneDelegate.invokeTask (zone.js:406:1)
at Object.onInvokeTask (core.js:28679:1)
at ZoneDelegate.invokeTask (zone.js:405:1)
at Zone.runTask (zone.js:178:1)
at ZoneTask.invokeTask [as invoke] (zone.js:487:1)
Which means this.member is undefined, now on one hand it does makes sense I would have needed to pass it to the child component, but on the other, I THINK this worked as is.. So I'm not sure what's the right solution..
This is because you're passing a regular function to another component and therefore the this keyword is not referring to the original component.
You should either use arrow functions for onUploadPhotoSuccess or bind this to it.
onUploadPhotoSuccess = (response: any) => {