モデルの角4、更新されたモデルからビューを変更

Question

こんにちは私はこのコンポーネントを私は 'updateUserInfo'サービスから呼び出すが、私は誰でも私を助けることができるビューの値を変更することができないのですか？

@Component({ 
    selector: 'app-menu', 
    templateUrl: './menu.component.html', 
    styleUrls: ['./menu.component.css'], 

}); 

export class MenuComponent { 

    firstname = "aaa"; 

    constructor() { } 

    updateUserInfo(user){ 
     this.firstname = "ciao"; 

    } 
} 

Answer 1

はuser.service.ts

import {Injectable} from '@angular/core'; 
import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from '@angular/http'; 
import {Observable} from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/observable/throw'; 

@Injectable() 
export class UserService { 


    constructor(private http: Http) { 
    } 

getUserName() { 
    let headers = new Headers(); 
    headers.append('X-Requested-With', 'XMLHttpRequest'); 
    headers.append('Content-Type', 'application/json;'); 
    return this.http.get("http://YourUrl",{ headers: headers}) 
         .map((response: Response) =>response.json()) 
    } 
} 

を持っyoгこれはあなたのコンポーネントです：

import { Component, OnInit } from '@angular/core'; 
import { UserService } from '../user.service'; 

@Component({ 
selector: 'app-menu', 
templateUrl: './menu.component.html', 
styleUrls: ['./menu.component.css'], 
providers: [UserService] 
}) 

export class MenuComponent { 

firstname = "aaa"; 

constructor(private userService: UserService) { 
////dont use in constructor many codes, best of use in ngOnInit 
} 

ngOnInit() { 
     this.userService.getUserName() 
     .subscribe(response=> {this.updateUserInfo(response.user.name);}); 
} 

updateUserInfo(user){ 
    this.firstname = user; 
} 

Answer 2

あなたは、コントローラ内部の機能を持っている場合は、その関数は、例えば、部品の内部から呼び出されるべきコンストラクタ

Answer 3

@Component({ 
    selector: 'app-menu', 
    templateUrl: './menu.component.html', 
    styleUrls: ['./menu.component.css'], 
    }) 

export class MenuComponent { 

firstname = "aaa"; 

constructor() { 
    this.updateUserInfo("text"); ///here called function 
} 

updateUserInfo(user){ 
    this.firstname = "ciao"; 
} 

}

Answer 4

にupdateUserInfoあなたの関数を呼び出す必要があります。

<div class="profile-usertitle-name"> {{ firstname }} </div> 
<button (click)="updateUserInfo('Mario')">Change name</button> 

サービスを呼び出す場合、サービスには "あなたがそれを購読する「約束」（観察可能なものでもあり得る）。このように：たとえば

constructor(private myService : MyService) { 
    myService.load().subscribe((user) => updateUserInfo(user)); 
}