サブスクライブメソッドのコンポーネントの属性を変更する

Question

私はフロントエンドpart.Iを開発するためにangular4を使用しています。コンポーネントにサブスクライブしたいオブザーバブルを返すサービスがあります。 ngOnInitメソッドの後であってもそれを保持し、デフォルト値に戻らないようにします。 これは私のコンポーネントのコードです：

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, 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'] 
}) 
export class UsersListComponent implements OnInit,AfterViewInit { 
    private users:any[]=["1","2","3"]; 
    private selectedUser:User; 
    constructor(public dialog: MdDialog,private userListService: UsersListService) { 
    } 

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

    public set $selectedUser(value: User) { 
     this.selectedUser = value; 
    } 

    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() { 


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

} 

これでgetUserList方法

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

     } 

Answer 1

私はあなたがngAfterViewInitは、（）変数権利をユーザーを更新するために、別のサブスクリプションを作成するために使用していることと思いますか？

サービスインスタンスをコンストラクタに挿入すると、テンプレートとコンポーネントのサービスの変数「this.users」に直接アクセスできます。

：あなたが機能を行うことができ

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

    } 

コンポーネントの場合：たとえば：あなたはreturn文なしに見るように、あなたのサービスで

、ちょうど、変数ユーザーの応答を保存するためにgetUserListメソッドを使用しますこの変数へのアクセスを必要なとき

getUsersFromService() { 
    return this.userListService.users 
} 

そして、あなたはgetUsersFromServiceを呼び出す必要があります（）

あなたはまた、トンでuserListService.usersにアクセスすることができましたemplateしますが、AOTコンパイルを実行すると、userListServiceがプライベート変数なので、いくつかのエラーが発生します。あなたはバックエンドに別のGETリクエストを作成する必要がある場合は

単にあなたのコンポーネントにこのような関数を呼び出す：

は

refreshUsers() { 
    this.userListService.get().subscribe() 
} 

この方法は、サービスのユーザー変数を更新します（そして、あなたは値が変更される場合がありますことがわかりますテンプレートではObservableなので）