model angular 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

例如yoг有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()) 
    } 
} 

這是您的組件：

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

你必須調用你的函數updateUserInfo在構造

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

如果控制器內的函數，該函數應該從組件內部調用，例如：

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

如果您打電話給服務，服務應該有一個「承諾「（可能是一種可觀察的），你認同這一點。就像這樣：

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