Question

我正在开发一个角度4应用程序。我正在使用restfull webservices从DB获取数据。所以我创建了一个名为UsersListService的前端服务，它有一个方法返回我在我的compnent中订阅的observable。我想将组件的属性用户更改为Web服务返回的数据，但遗憾的是组件的属性始终设置为默认值。所以一旦页面加载，我得到了网络服务返回的数据但是一旦我将搜索或分页用户设置为默认值[＆＃34; 1＆＃34;，＆＃34; 2＆＃34;，＆＃34; 3＆＃34 ]。

这是服务方法：

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

我找到了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);
  }

}

更改组件的属性un subscribe方法

1 个答案: