angular2 http request repeat many times

Question

today I use angular 2 to write a http request.I got the data in service,but I got undefinded in component .I don't know how to solve it,please give me some help.

service

export class AdminStoreService {
    data:Object;

    constructor(http:Http) {
        this.http = http;
    }

  findAll() {
    return this.http
        .get('/data/admin.json')
        .map((res:Response) => {
            console.log(data); //can get the json data
            this.data = res.json();
        });
}

}

console.log(data)

console.log(res)

component

export class AdminComponent {
admins:Object;

constructor(adminStore:AdminStoreService) {
    this._adminStore = adminStore;
    this._adminStore.findAll().subscribe(data => this.admins = data);
   console.log(this.admins);   // undefined
}

}

template can't get the data

            <section *ngIf="admins">
                <tr *ngFor="let admin of admins" class="animated fadeInRight">
                    <td>{{admin.username}}</td>
                    <td class="alert">{{admin.authLevel}}</td>
                    <td>{{admin.operator}}</td>
                    <td>{{admin.created | dateFormat:'YYYY-MM-DD HH:mm:ss'}}</td>
                    <td>{{admin.updated | dateFormat:'YYYY-MM-DD HH:mm:ss'}}</td>
                </tr>
            </section>

source code is on github :https://github.com/nodejs-study/node-koa/tree/master/web/admin — Evan Hu, Jun 13 '16 at 05:38

score 0 · Accepted Answer · edited May 23 '17 at 12:02

0

Every time Angular invokes change detection, getAdmin() is called to check if it returns a different value as the last time.

There are different ways to work around this situation

You can cache the data in the service and return it immediately when already available as explained in What is the correct way to share the result of an Angular 2 Http network call in RxJs 5?
You can call getAdmins() in the constructor, assign it to a property and bind to that property instead.

export class AdminComponent {
    constructor(adminStore:AdminStoreService) {
        this._adminStore = adminStore;
        this._adminStore.findAll().subscribe(data => this.admins = data);
    }
}

The service also doesn't work the way it is built. It should be like

export class AdminStoreService {
  data:Object;

  /**
   * 构造函数
   */
  constructor(http:Http) {
    this.http = http;
  }

  findAll() {
    return this.http
        .get('/data/admin.json')
        .map(res:Response => res.json());
  }
}

update

Get debug output

  findAll() {
    return this.http
        .get('/data/admin.json')
        .map(res:Response => res.json())
        .map(data => { 
           console.log(data);
           return data;
        });
  }

edited May 23 '17 at 12:02

Community

1
1

answered Jun 13 '16 at 05:38

Günter Zöchbauer

623,577
216
2,003
1,567

I change the code as yours in service ,but has a error TypeError: this.http.get(...).map is not a function – Evan Hu Jun 13 '16 at 06:11
http://stackoverflow.com/questions/34515173/angular-2-http-get-with-typescript-error-http-get-map-is-not-a-function-in – Günter Zöchbauer Jun 13 '16 at 06:12
`this.admins` is only set when `data => this.admins = data` is executed. This is why I modified your `findAll()` method. `data => this.admins = data` is a callback passed to `subscribe`. When the server eventually responds, this callback will be executed. You might want to add `
...
` around your template or use `admins?.someProp` to avoid errors when `this.admins` is not yet set. – Günter Zöchbauer Jun 13 '16 at 06:39
Can you please try to print `data` to the console like shown in my `update` in my answer. Can you also please edit your question and add there what you currently have. Code in comments is quite unreadable. – Günter Zöchbauer Jun 13 '16 at 07:09
`console.log(this.admins); // undefined }` This is expected. This code is executed immediately. `data => this.admins = data` is executed much later, when the response from the server arrives. You need to move the code inside `subscribe(...)` to be executed when the data arrives. (like where you placed `console.log()` in `map(...)` – Günter Zöchbauer Jun 13 '16 at 09:32
I know what you said,but my goal is show the data on template. – Evan Hu Jun 13 '16 at 09:45
What does `console.log(data);` in `findAll()` print? How does the data look like? – Günter Zöchbauer Jun 13 '16 at 09:47
source code is on github :[source code](https://github.com/nodejs-study/node-koa/tree/master/web/admin) if you have time ,could you please download and try what wrong ? – Evan Hu Jun 13 '16 at 10:02
If you could create a Plunker I would check it. I don't have TS environment setup up locally because I use only Dart myself. – Günter Zöchbauer Jun 13 '16 at 10:05
this project I wrote with es6,not ts. – Evan Hu Jun 14 '16 at 01:32

angular2 http request repeat many times

1 Answers1