Winkel 2 Konstruktor innerhalb Service weitere Funktionen innerhalb Dienste arbeiten nicht

Question

meinen Code

component.ts Seite arbeiten:

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-Seite:

<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 Seite:

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

meine Frage ist component.ts Seite Erbauer innerhalb userSerice arbeitet.

aber LoadMore Funktion innerhalb Userservice nicht

Answer 1

wie diese versuchen:

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

Answer 2

Zunächst einmal arbeiten, Abonnement sollte nur einmal vorgenommen werden. Wenn Sie einmal abonnieren, wird diese Funktion jedes Mal ausgelöst, bis die Komponente zerstört wird. Bitte entfernen Sie das Abonnement von der LoadMore-Funktion.

Zuerst müssen Sie OnInit, OnDestroy lifcycle Haken aus Winkel/Kern wie importieren unter

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

Nach dieser innerhalb Komponente, machen das Abonnement

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

nicht abmelden Vergessen, wenn Komponente zerstört.

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

Hoffe, das würde helfen.