각도 2. 비동기 기능

Question

제가

문제 코너 (2)에 비동기 기능 바인딩 문제가 바인딩 VK (전역 변수) 비동기 기능 API를 가지고 있으며, I는 관찰 가능한 그것을 래퍼 tryid. 그러나 Button에서 맨 처음 클릭 할 때 {{model? .count}}보기는 여전히 비어 있습니다. 두 번째 클릭 후에 만 ​​요청 번호를 봅니다. 그것을 고치는 방법? 글로벌 API 아마 외부 Angulars 영역을 실행하는 몇 가지 코드를 발생시키고이 그것을 변경 감지를 실행하는 데 필요한 각도가 모르는 이유임을

import { Component } from '@angular/core'; 
import {Observable} from 'rxjs/Observable'; 
@Component({ 
    selector: 'my-app', 
    template: ` 
     <h1>My First Angular App</h1> 
     <button (click)="onClickMe()">Receive data</button> 
     <span>{{model?.count}}</span> 
     ` 
}) 
export class AppComponent { 
    private data: Observable<any>; 
    model: any; 

    onClickMe() { 
     this.data = new Observable(observer => { 
      VK.api("friends.get", {user_id: 2888170}, data => observer.next(data.response)); 
     }); 

     let subscription = this.data.subscribe(
      model => this.model = model 
     ); 

    } 
} 

Answer 1

.

이 문제를 해결해야 명시 적으로 호출 :이 문제를 해결하는

export class AppComponent { 
    private data: Observable<any>; 
    model: any; 

    constructor(private cdRef:ChangeDetectorRef) {} 

    onClickMe() { 
     this.data = new Observable(observer => { 
      VK.api("friends.get", {user_id: 2888170}, data => observer.next(data.response)); 
     }); 

     let subscription = this.data.subscribe(
      model => { 
       this.model = model; 
       this.cdRef.detectChanges(); 
     ); 

    } 
} 

다른 방법입니다

• 사용 this.zone.run(...)을
• 이 각도 내에서 글로벌 API를 초기화 constructor(private zone:NgZone) {}으로는 Angulars 영역 내에서 실행되도록 (항상 가능한 것은 아닙니다).