CODEWITHSUNDEEP
angulartypescriptconstructorangular-services
kathir
kathir

Reputation: 4285

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

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

Upvotes: 0

Views: 1180

Answers (2)

Chandru
Chandru

Reputation: 11184

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);
    }
}

Upvotes: 1

Santhosh V
Santhosh V

Reputation: 410

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.

Upvotes: 0

Related Questions