Angular Typescript getter and setter returning Undefined

Question

I have a class where I require a property in that class to return a few fields in an object. I've done this a few times in.Net, but in Angular, I'm battling with an "Undefined" being returned.

I can confirm that the properties(transLanguageId, transLangDesc, translation) is populated on the IBatchFile, but not coming back on the GET. Not even a console.log shows up in the GETTER. Not hitting the GETTER code I presume.

What am I missing here?

Thank you in advance for your assistance.

model.ts

export class translationItem {  
  id: number;
  language: string;
  translation: string; 
}

export class IBatchFile {
  constructor(_transData: translationItem) {
    this._transData = new translationItem();
  }
  private _transData: translationItem;

  get transData(): translationItem {      
    this._transData.id = this.transLanguageId;
    this._transData.language = this.transLangDesc;
    this._transData.translation = this.translation;     
    return this._transData;
  };
  set transData(value: translationItem) {
     this._transData.id = value.id;
     this._transData.language = value.language;
     this._transData.translation = value.translation;
  };
  transLanguageId: number;
  transLangDesc: string;
  translation: string;
}

batchdocList.ts

private _batchFileListResults$ = new BehaviorSubject<IBatchFile[]>([]);

public loadDocList(batchid) {
  this.urlservice.getBatchFiles(batchid)         
  .subscribe(result => {      
    this._batchFileListResults$.next(result); //**result is of class IBatchFile**        

    this._batchFileListResults$.value.forEach(item => {          
      console.log(item.transData);  //**returns Undefined**
    });
}

url.service.ts

getBatchFiles(batchId: number) {             
        return this.dataservice.getBatchFiles(config.resources.Api.gatewayUri + config.resources.Api.getBatchFiles+"/"+batchId);
     }

data.service.ts

getBatchFiles(url:string): Observable<IBatchFile[]> {        
        return this.http.get<IBatchFile[]>(url)
        .pipe(map(response => response))
        .pipe(catchError(this.handleError));
    }

Answer 1

Assuming that:

• you are using HttpClient ( @angular/common/http ):
• you have class X

you need to know that it to know that http.get<X> does not return an instance of X class.

The fields are correctly populated, but the prototype chain is not. You can test it yourself (in your browser DevTools):

result.constructor  //ƒ Object()

Compare it with:

const x = new X();
x.constructor       //class X

Thus, any items that are placed on the objects prototype (like methods and get / set accessors) are missing in the result object.

In my project I restricted return types from HttpClient.get to types ( type X instead of class X ). As types are compiled away, you will avoid this kind of weirdness.

Alternatively, you can transform the output from HttpClient.get and instantiate real classes via contructor.