изменение атрибута компонента без метода подписки

В настоящее время я разрабатываю приложение angular 4. Я использую веб-сервисы restfull для получения данных из БД. Поэтому я создал интерфейсную службу под названием UsersListService, у которой есть метод, возвращающий наблюдаемое, на которое я подписался в своем компоненте. Я хочу измените пользователей атрибута компонента на данные, возвращаемые веб-службой, но, к сожалению, для атрибута компонента всегда установлено значение по умолчанию. Итак, после загрузки страницы я получил данные, возвращаемые веб-службой, но как только я выполняю поиск или разбиение на страницы пользователей установлено значение по умолчанию ["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>

angular angular2-template angular-httpclient angular-http
person fbm    schedule 16.10.2017    source источник
comment
set [currentPage]= пользователи без одинарных кавычек   -  person omeralper    schedule 16.10.2017
comment
проблема не в этом   -  person fbm    schedule 16.10.2017
comment
‹vr-breadcrumbs [currentPage]='пользователи' ›‹/vr-breadcrumbs›   -  person omeralper    schedule 16.10.2017
comment
это меню, поэтому оно должно быть таким. Оно не предназначено для отображения данных.   -  person fbm    schedule 16.10.2017

Ответы (1)


arrow_upward
0
arrow_downward

благодаря этой статье я решил свою проблему: https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html

я удалил изменения пользовательского интерфейса, так что это код моего компонента

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

}
person fbm    schedule 17.10.2017