Question

我的代码

component.ts页面：

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页面：

<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页面：

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

我的问题是 userSerice 中的component.ts页面构造函数正在运行。

但用户服务内的 LoadMore 功能无法正常工作

Answer 1

试试这样：

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

首先，订阅只应进行一次。如果您订阅一次，那么每次都会触发该函数，直到组件被销毁。所以请从LoadMore函数中删除订阅。

首先，您必须从角度/核心导入OnInit，OnDestroy生命周期钩子，如下所示

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

在内部组件之后，进行订阅

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

当组件被销毁时，不要忘记取消订阅。

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

希望这会有所帮助。

内部服务中的角度2构造函数工作内部服务无法正常工作

2 个答案: