改變組件的屬性未訂閱方法

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

}