3

I downloaded the latest build of ngx-admin (https://github.com/akveo/ngx-admin), and served it up locally. In the ./@core/data/users.service.ts file I have added the following method

  getHeroes (): Observable<any[]> {
    return this.http.get<any[]>('http://localhost:63468/api/clubs/heroes');
  }

That endpoint just returns some JSON like so:

[{"id":11,"name":"Mr. Nice"},{"id":12,"name":"Mr. Nice2"},{"id":13,"name":"Mr. Nice3"},{"id":14,"name":"Mr. Nice4"},{"id":15,"name":"Mr. Nice5"},{"id":16,"name":"Mr. Nice6"},{"id":17,"name":"Mr. Nice7"},{"id":18,"name":"Mr. Nice8"},{"id":19,"name":"Mr. Nice9"},{"id":20,"name":"Mr. Nice0"}]

In ./@theme/components/header/header.component.ts I have added a click handler method:

  getHero() {
    this.userService.getHeroes()
      .subscribe(heroes => { 
        debugger;
        this.hero = heroes[0]
      });
  }

In ./@theme/components/header/header.component.html I added a button and click event like:

  <button (click)="getHero()">
    add hero
  </button>
  {{hero?.name}}

I have done this to the same example project on Angular.io (https://angular.io/tutorial/toh-pt6).

The issue is:

In the ngx-admin application, once that debugger line is hit, the this.hero = heroes[0] is properly set with the data I expect. Once the execution leaves that line of code, the view is not updated. If I inject private ref: ChangeDetectorRef, and call this.ref.detectChanges(); immediately after this.hero = heroes[0], then the view is properly updated. However, in the angular.io example of heroes, the view is properly updated within the context of the subscribe call. In that application no this.ref.detectChanges(); is required.

Is there something in the ngx-admin project that is messing up the Angular change detection?

alex
  • 444
  • 1
  • 5
  • 17
  • Could you please tell me how are you consuming `http`? `this.http.get` doesn't support type arguments and you have used it as `this.http.get`. It is giving a compile time error. – planet_hunter Feb 07 '18 at 12:06
  • @ManojChalode https://angular.io/guide/http#type-checking-the-response – alex Feb 08 '18 at 16:44

0 Answers0