angular 2 constructor inside service working another functions inside services not working

Question

my code

component.ts page:

import {Component, OnInit, NgModule, VERSION} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import { UserService } from "../services/user.service";
import {Router, ActivatedRoute, Params  } from '@angular/router';

@Component({
       selector: 'app-all-users',
       templateUrl: './all-users.component.html',
       styleUrls: ['./all-users.component.css'],
       providers: [ UserService ]
 })

export class AllUsersComponent{
   users; usersnew; limit; limitnew;  

constructor(public userService: UserService, public router: Router,  public route: ActivatedRoute) {
  this.limit = "0";
  this.limitnew = "0";
  this.userService.getTestUsers(this.limit).subscribe(  users => this.users = users);
}
LoadMore(){  
  this.limit = "12";
  this.limitnew = +this.limitnew + +this.limit;
  this.userService.getTestUsers(this.limitnew).subscribe(  usersnew => this.usersnew = usersnew);
  this.users = [...this.users , ...this.usersnew];
  console.log(this.users);
  }
}

html page:

<div class="row">
  <div class="col-sm-3 *ngFor="let user of users ;let i = index ">
   <img *ngIf="user.image == ''"  src="http://localhost/assets/images/user.png"  class="user_img">
  </div>
</div>
<button (click)="LoadMore()"> Load More </button>

userService page:

import { Component, Injectable } from '@angular/core'; import { Http, Response } from '@angular/http'; import { Observable } from 'rxjs/Rx'; import 'rxjs/add/operator/map';
@Injectable()
export class UserService{
  constructor(private http: Http) { this.http = http; }

 getTestUsers(limitid): Observable<any> {        
     return this.http.get("http://localhost/AdminApp/api/get_all_user.php?id="+ limitid).map(res => res.json());
  }
 }

my question is component.ts page constructor inside userSerice is working.

but LoadMore function inside userService not working

Please give a [mcve] - what exactly does *"not working"* mean? — jonrsharpe, Oct 24 '17 at 12:33
print log this.usersnew inside the subscribe in loadMore Method. if you get the value inside the subscribe method your code is correct — Chandru, Oct 24 '17 at 12:50

score 1 · Accepted Answer · answered Oct 24 '17 at 12:48

Try like this :

export class AllUsersComponent {
    users: Array<any> = [];
    usersnew: Array<any> = [];
    limit; limitnew;

    constructor(public userService: UserService, public router: Router, public route: ActivatedRoute) {
        this.limit = "0";
        this.limitnew = "0";
        this.userService.getTestUsers(this.limit).subscribe(users => this.users = users);
    }

    LoadMore() {
        this.limit = "12";
        this.limitnew = +this.limitnew + +this.limit;
        this.userService.getTestUsers(this.limitnew)
            .subscribe((usersnew) => {
                this.usersnew = usersnew
            }, (error) => {
                console.log('error', error);
            }, () => {
                this.done()
            });
    }

    done() {
        this.users = [...this.users, ...this.usersnew];
        console.log(this.users);
    }
}

Santhosh V · Answer 2 · 2017-10-24T12:47:24.330

0

First of all, subscription should be made only once. If you subscribe once, that function will be fired every time until the component destroyed. So please remove the subscription from LoadMore function.

First you have to import OnInit, OnDestroy lifcycle hooks from angular/core like below

import { Component, OnInit, OnDestroy } from '@angular/core';

After that inside component, make the subscription

ngOnInit() {
    this.subscription = this.userService.getTestUsers(this.limit).subscribe(  users => this.users = users);
  }

Don't forget to unsubscribe it when component destroyed.

ngOnDestroy(){
    this.subscription.unsubscribe();
  }

Hope this would help.

edited Oct 24 '17 at 12:47

answered Oct 24 '17 at 12:38

Santhosh V

380
1
11

what is the alternative of subscription – kathir Oct 24 '17 at 12:44
No alternates for subscriptions..! – Santhosh V Feb 22 '18 at 11:02

angular 2 constructor inside service working another functions inside services not working

2 Answers2