Angular 4 get properties from class

Question

In my typescript file I have a code like this:

searchByID(_byid: ByID) {
    // new instance of the Order model
    this.order = new Order();
    this._httpService.post(this.apiBaseURL + this.api + '/SolicitudSugerido/ByIdMst', _byid)
    .subscribe(
        data => {
            this.productsResultArray = data,
            this.order.fechahora = this.productsResultArray.fechahora;
            this.order.idsestatus = this.productsResultArray.idsestatus;
            this.order.idestatu = this.productsResultArray.idestatu;
            this.order.abc = this.productsResultArray.abc;
            this.order.guardar = this.productsResultArray.guardar;
            //console.log(this.productsResultArray);
        }
    )
}

I have other component where I do this:

import { SolicitudComponent } from "./../solicitud/solicitud.component";

Then I have this method in the same component:

showSolicitudFormWithData() {
    this.sugerido = this._solicitud.order;
    this.fecha = this._solicitud.order.fechahora;
    console.log(this.sugerido);
}

So the problem is that this.fecha when I try to see the value at console it says undefined, but this.sugerido prints this:

Order {} abc: true, fechahora: "", guardar: false, idestatu: "1"

So what I want to know is how can I print in my html component those values, I have tried: {{fecha}}, but it does not print the value.

I want to have access to that object in my view and in my ts file. For example to get that response in another object then i can iterate its properties one by one. Like:

this.order = this._solicitud.order;
this.order.fechahora = this._solicitud.order.fechahora;
this.order.idsestatus = this._solicitud.order.idsestatus;

Later if i want to just access one property or use it as parameter for another api call.

You probably read it before it is set. I can't see the connection in your code though. — Günter Zöchbauer, Oct 18 '17 at 19:05
In my constructor i have. constructor(private _solicitud: SolicitudComponent) {}, thats why im using this_solicitud.order; order is a class i have in my solicitudcomponent.ts like this: order: Order; then this.order = new Order(); — Raul Baez, Oct 18 '17 at 19:14
Async code, especially calls over the network, take an eternity compared to code executed in the same process. If you make an HTTP request, the calkback passed to `subscribe(...)` will only be executed when the response arrives. In the meantime your other code reads the field. — Günter Zöchbauer, Oct 18 '17 at 19:18
https://stackoverflow.com/questions/36271899/what-is-the-correct-way-to-share-the-result-of-an-angular-2-http-network-call-in/36291681#36291681 might give you ideas to connect async code to ensure some order. — Günter Zöchbauer, Oct 18 '17 at 19:19

score 0 · Answer 1 · answered Oct 18 '17 at 20:06

It isn't a recommended solution to add a component via DI(in the constructor) and then get the value. You will not know when the value is returned. In order to give a better answer more structure or understanding of the code is needed.

If you have more than one component on the same screen then you can use events and setup a container component which handles those events across the components. Have a look at the following to get an understanding: https://blog.angular-university.io/angular-2-smart-components-vs-presentation-components-whats-the-difference-when-to-use-each-and-why/

The second scenario is if one component is try to pass a value which the other component wants to subscribe on another route. In such a scenario you would want to use the local storage to store the value and the second component has an observable setup on that value. So whenever a change happens it is rendered. The following link will be helpful in that scenario: How to pass data from one component to other in angular 2

The ideal solution however is to use an application State. There is a module called ngrx for Angular which is basically the implementation Redux. Read the following link to get an understanding of that:

https://angular-2-training-book.rangle.io/handout/state-management/ngrx/

edkeveked · Accepted Answer · 2017-10-24T21:18:18.813

0

Since you said that the value of your service is fetched by this.sugerido, it might be an ansynchronous issue between when the data is set and when you are reading it whith this.fecha. You can use directly in your html template the elvis operator who will wait until the value is retrieved before displaying it.

Try this in your html template: {{sugerido?.fechahora}} instead of {{fecha}}.

If you want to access the data fetch from your server, you can proceed this way:

searchByID(_byid: ByID) { // call the service
    this._httpService.post(this.apiBaseURL + this.api + '/SolicitudSugerido/ByIdMst', _byid)
      .subscribe(data => {
          this.productsResultArray = data;
          // if you want to use this data elsewhere in the component, you can call a function with data as argument
          this.anotherFunction(data)
        },
        error => {
          return <any>error
        });
  }

  anotherFunction(data: any) {
    //process the data send from the server here.
    console.log(data);
  }

edited Oct 24 '17 at 21:18

answered Oct 19 '17 at 08:26

edkeveked

17,989
10
55
93

@RaulBaez, that is great! – edkeveked Oct 20 '17 at 15:06
hey @edkeveked im facing one more issue, i have the order object, and i want to print it to console like this: console.log(this._solicitud.order); and i do see the object with its properties, but when i try to access a single property i see and "undefined" only. console.log(this._solicitud.order.fechahora); how can i achieve this? – Raul Baez Oct 23 '17 at 16:55
With console.log(this.order) i get the object with its properties, but console.log(JSON.stringify(this.order)) and cosole.log(Object.keys(this.order); i got nothing. – Raul Baez Oct 23 '17 at 18:57
Could you please post here, what you get with `console.log(JSON.stringify(this.order))`? – edkeveked Oct 23 '17 at 19:48
yeah that will output: [], just like that. – Raul Baez Oct 24 '17 at 18:35
I think my problem is that im trying to access that object which is filled in the .subscribe, but i don't know how to make that work or another alternative to do it. – Raul Baez Oct 24 '17 at 18:36
Why don't you simply do `this.order=this.productsResultArray` since they share almost all the attributes? Or `this.order=data`? – edkeveked Oct 24 '17 at 19:16
Yes i tried that also, but the problem is that they are in different components, different .ts files, well im not sure if thats a problem lol. – Raul Baez Oct 24 '17 at 19:34
I make it work, but there's still an issue, it works till the second time i get results from the api. – Raul Baez Oct 24 '17 at 19:38
This is the call: `code` searchByID(_byid: ByID) { // call the service this._httpService.post(this.apiBaseURL + this.api + '/SolicitudSugerido/ByIdMst', _byid) .takeWhile(() => this.alive) .subscribe( data => { this.productsResultArray = data; }, error => { return error }, () => { return this.productsResultArray; }, ); } – Raul Baez Oct 24 '17 at 20:23

Angular 4 get properties from class

2 Answers2