CODEWITHSUNDEEP
angulartypescriptclassproperties
Farrel
Farrel

Reputation: 193

Angular Typescript getter and setter returning Undefined

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));
    }

Upvotes: 2

Views: 1886

Answers (1)

Lesiak
Lesiak

Reputation: 26094

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.

Upvotes: 3

Related Questions