Angular 2在更改模型后不更新DOM

时间:2016-09-08 12:16:06

标签: dom angular updates

我在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]} )  )
    }
}

0 个答案:

没有答案