我在angular2上遇到了一些麻烦,我无法理解。问题是,在HTTP请求正确完成后,View不会更新。
我正在重新分配变量(不更新引用中的对象),我还使用基于布尔值的* ngIf属性测试一些额外的div。 Dom不会更新,也不会更新div和{{object interpolation}}
这是观点:
<div *ngIf="isLoading">Loading data...</div>
<div *ngIf="!isLoading">{{ perfil | json }}</div>
Debug: {{ perfil | json }}
<a (click)="test()" >Click test</a>
这是组件代码:
export class GitTestComponent implements OnInit{
perfil: GithubProfile = <GithubProfile>{}; //Also tested just "perfil: GithubProfile;"
isLoading: boolean = true;
constructor(private _githubService: GithubService){
}
ngOnInit(){
this._githubService.getProfile('jaimehrubiks')
.timeout(5000)
.subscribe(
(profile) => this.perfil = profile,
(error) => console.log(error),
() => this.isLoading = false
)
}
test(){
}
}
作为一个注释,如果我点击锚点或任何分配了事件的元素,DOM实际上会更新。
以下是服务代码,以防出现问题:
import {Injectable} from '@angular/core';
import {Http} from '@angular/http'
import {Observable} from 'rxjs/Observable' //Also tested rxjs/Rx
import 'rxjs/add/observable/forkJoin';
import 'rxjs/add/operator/map';
import {GithubUser, GithubProfile, GithubFollowers} from './github.interface'
@Injectable()
export class GithubService{
usersUrl = "https://api.github.com/users/";
constructor(private _http: Http){
}
getUser(user: string) : Observable<GithubUser>{
return this._http.get(this.usersUrl + user)
.map(res => res.json());
}
getFollowers(user: string) : Observable<GithubFollowers>{
return this._http.get(this.usersUrl + user + '/followers')
.map(res => res.json());
}
getProfile(user: string) : Observable<GithubProfile>{
return Observable.forkJoin(
this.getUser(user),
this.getFollowers(user))
.map( joined => <GithubProfile> new Object( {user: joined[0], followers: joined[1]} ) )
}
}