0

I have a problem (sorry about my english). In my Angular 4 application with TypeScript, i use a get() method and a subscribe() method to receive a remote object in JSON format and deserialize it to get an instance of a class that matches perfectly with my JSON data (all class data fields are mirrored in the json file).

It seems that everything works, because I can normally use these object data fields in my HTML template (the object is actually created and instantiated).

the problem (that I don't explain) occurs when I insert in this class new methods or new data fields. The HTML template doesn't display these new data fields or the result of new methods, and I do not explain why this happens.

How can I solve this problem? Example:

// In ExampleObject.ts
export class ExampleObject {
property1: string;
property2: string;
}

// In another file
exampleObject: ExampleObject;

getCurrentObject() {
  this.objectService.getObjcet().subscribe(
  data => this.exampleObject = data,
  error => {
    console.log('some error found: ' + error);
});

At this point if I tried to create a method in ExampleObject:

export class ExampleObject {
property1: string;
property2: string;

getHello() {
 return 'Hello'; 
}
}

In the HTML template the following instructions works

{{exampleObject.property1}}
{{exampleObject.property2}}

But this instruction doesn't work:

{{exampleObject.getHello()}}
claudioz
  • 1,121
  • 4
  • 14
  • 25
  • How do you create an ExampleObject object in your service? – Gosha_Fighten Sep 06 '17 at 19:18
  • any reason you want something like this it will always have static content? – Rahul Singh Sep 06 '17 at 19:20
  • To do that, you need to construct the Typescript object that has the method prototype and merge in the data from JSON (you don't actually have an instance of your class). – crashmstr Sep 06 '17 at 19:22
  • @crashmstr I tried, but the effect is not the effect that I wanted. The browser displays the page differently if I use interpolation with data obtained from JSON file and normal data (use methods) of the class... – claudioz Sep 06 '17 at 19:58

1 Answers1

0

As stated in the comments section, you don't have an instance of your ExampleObject and therefore cannot call methods on it.

Your getCurrentObject method is assigning the retrieved data to a layout that looks like your ExampleObject, but is not actually an instance of it. That is why you can't call any methods or new properties.

You'd need to do something like what was suggested in the comments.

getCurrentObject() {
  this.objectService.getObjcet().subscribe(
  data => this.exampleObject = Object.assign(new ExampleObject(), data),
  error => {
    console.log('some error found: ' + error);
});

NOTE: I did not verify this syntax. If you'd want to build a plunker, I could confirm.

This line: 

this.exampleObject = Object.assign(new ExampleObject(), data)

Creates a new ExampleObject and then assigns its matching properties to the values defined in data.

Is that what you had tried?

DeborahK
  • 57,520
  • 12
  • 104
  • 129