改变组件的属性未订阅方法

Question

我目前深化发展的角4个app.I使用web服务的REST类型正在从DB.So得到i的数据由被称为UsersListService前端服务，其具有返回到可观察到的一个方法，该方法我在compnent.I订阅想要的组件的属性的用户更改为Web服务，但遗憾的是该组件的属性总是被设置为它返回的数据的默认value.So一旦页面加载我被返回的数据web服务，但一旦我做搜索或paginetion用户设置为它的默认值“1”，“2”，“3”。

这是服务方法：

getUserList(){ 
    //this method is returning the items 
      return this.http.get(this.usersUrl) 
      .map(res => { 
       this.users=res['items']; 
       return this.users; 
      }); 

     } 

这是我的组件

import {User} from '../../auth/shared/user'; 
import {CreateUserComponent} from '../create-user/create-user.component'; 
import {UpdateUsersCredentialsComponent} from '../update-users-credentials/update-users-credentials.component'; 
import { Component, OnInit, AfterViewInit } from '@angular/core'; 
import { MdDialog } from '@angular/material'; 
import{UsersListService} from '../shared/users-list.service' 
@Component({ 
    selector: 'vr-users-list', 
    templateUrl: './users-list.component.html', 
    styleUrls: ['./users-list.component.scss'] 
}) 
export class UsersListComponent implements OnInit,AfterViewInit { 
    private users:any[]=["1","2","3"]; 
    constructor(public dialog: MdDialog,private userListService: UsersListService) { } 

    ngOnInit() { 

     this.userListService.getUserList().subscribe (
    data =>{ 
    console.log("those are data "+data.length);  
    this.users=data; 


}); 


    } 
    ngAfterViewInit(){ 
    this.userListService.getUserList().subscribe (
     data =>{ 
     console.log("those are data "+data.length);  
     this.users=data; 


    }); 

    } 
    openUsersDetails() { 
    this.dialog.open(UpdateUsersCredentialsComponent); 
    } 
    openCreateUser() { 
    this.dialog.open(CreateUserComponent); 
    } 

} 

这是我的HTML

<div class="container"> 

     <div fxLayout="row" fxLayoutAlign="space-between center"> 
      <vr-breadcrumbs [currentPage]="'users'" ></vr-breadcrumbs> 
      <div fxLayout="colomun" fxLayoutAlign="end"> 
       <h5> <div class="value" [vrCountUp]="{suffix: ' users' }" [startVal]="0" [endVal]="240">88</div> 
       </h5> 
       </div> 

       <button type="button" md-fab color="primary" (click)="openCreateUser()"> <i class="fa fa-user-plus"></i></button> 

      </div> 

<table datatable class="row-border hover"> 
    <thead> 
    <tr> 
     <th>ID</th> 
     <th>First name</th> 
     <th>Email</th> 
     <th>Position</th> 

    </tr> 
    </thead> 
    <tbody> 
     <tr *ngFor="let data of users" (click)="openUsersDetails()" > 
      <td>{{data.login}}</td> 
      <td>"test"</td> 
      <td>"test"</td> 
      <td>"test"</td> 
     </tr> 
    </tbody> 
</table> 
</div> 

Answer 1

感谢对本文中，我解决我的问题：https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html

我deteched的UI chnages所以这是我的组件的代码

import {CreateUserComponent} from '../create-user/create-user.component'; 
import {UpdateUsersCredentialsComponent} from '../update-users-credentials/update-users-credentials.component'; 
import { Component, OnInit, OnChanges, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; 
import { MdDialog, MdDialogRef, MdDialogConfig } from '@angular/material'; 
import{UsersListService} from '../shared/users-list.service' 
import { User } from 'app/pages/Users/shared/user'; 
@Component({ 
    selector: 'vr-users-list', 
    templateUrl: './users-list.component.html', 
    styleUrls: ['./users-list.component.scss'], 
    changeDetection: ChangeDetectionStrategy.OnPush 
}) 
export class UsersListComponent implements OnInit,OnChanges { 
    private users:any[]=["1","2","3"]; 
    private selectedUser:User; 
    constructor(public dialog: MdDialog,private userListService: UsersListService,private cd: ChangeDetectorRef) { 
    } 

    public get $selectedUser(): User { 
     return this.selectedUser; 
    } 

    public set $selectedUser(value: User) { 
     this.selectedUser = value; 
    } 
    ngOnChanges(){ 
this.cd.detach(); 
    } 
    ngOnInit() { 

     this.userListService.getUserList().subscribe (
    data =>{ 
    console.log("those are data "+data.length);  
    this.users=data; 
    this.cd.markForCheck(); // marks path 


}); 


    } 

    openUsersDetails() { 


    let config = new MdDialogConfig(); 
    let dialogRef:MdDialogRef<UpdateUsersCredentialsComponent> = this.dialog.open(UpdateUsersCredentialsComponent, config); 
    dialogRef.componentInstance.email =this.selectedUser.$email; 
    } 
    openCreateUser() { 
    this.dialog.open(CreateUserComponent); 
    } 

}