更改组件的属性取消订阅方法

Question

我目前正在开发一个 Angular 4 应用程序。我正在使用 RESTful Web 服务从数据库中获取数据。

我创建了一个名为 UsersListService 的前端服务，它有一个方法可以返回我在组件中订阅的 observable。我想将组件的属性 users 更改为 web 服务返回的数据，但不幸的是组件的属性总是设置为其默认值。

所以一旦页面被加载，我得到了网络服务返回的数据，但是一旦我进行搜索或分页，用户被设置为它的默认值 ["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="column" 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

我解除了 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);
  }

}