BehaviorSubject RxJs angular2

Question

BehaviorSubjectを持つコンポーネントでresponseの値を取得できません。私はそれを手に入れてそれを渡す。

私はルートガードのサービスからHTTPをトリガーしています。

サービス：

@Injectable() 
export class ProjectsService { 
projects: Subject<Project[]> = new BehaviorSubject<Project[]>([]); 

load(clientId: string, active: boolean): Observable<boolean> { 
    return new Observable<boolean>((obs) => { 
     this._api.send(active ? 'projects.getActive' : 'projects.getAll',clientId).subscribe(
      res => { 
       let temp = []; 
       res.forEach(a => temp.push(new Project(a))); 

       if (active) this.projects.next(temp); 
       else this.externalProjects.next(temp); 
       obs.next(true); 
       obs.complete(); 
      }, 

      err => { 
       obs.next(false); 
       obs.complete(); 
      } 
     ); 
    }); 
} 

コンポーネント：

ngOnInit(): void { 
    // todo: check why not to load already added 
    this._projectsListener = this._projectsService.projects.subscribe(a => { 
     this.showIntro = a.length ? false : true; 
     this.projects = a; 
    }); 
} 

HTML：それはちょうどHTTPのparams ...のクエリのparamをgetingだ

<div class="project" [hidden]="!showIntro" *ngFor="let project of projects> 
    {{project.title}} 
</div> 

ガード：

@Injectable() 
export class ProjectsGuard implements CanActivate { 
    constructor(
     private _projectsService: ProjectsService, 
     private _router: Router) {} 

    canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 
     return this._projectsService.load(next.params['id'], true) 
    } 
} 

私もNgZoneを試みるが、私はわからないんだけど、それは正しい方法である：すべての

load(clientId: string, active: boolean): Observable<boolean> { 
    return this._api.send(active ? 'projects.getActive' : 'projects.getAll',clientId) 
     .map(res => { 
      let temp = res.map(a => new Project(a)); 

      this._ngZone.run(() => { 
       console.log('temp: ', temp); 
       if (active) this.projects.next(temp); 
       else this.externalProjects.next(temp); 
      }); 

      return true; 
     }) 
     .catch(() => Observable.of(false)); 
} 

Answer 1

：まず、観察の内側に別の観測可能に加入しないでください。代わりに、ストリームとしてそれを書く：

@Injectable() 
export class ProjectsService { 
projects: Subject<Project[]> = new BehaviorSubject<Project[]>([]); 

load(clientId: string, active: boolean): Observable<boolean> { 
    return this._api.send(active ? 'projects.getActive' : 'projects.getAll',clientId) 
     .map(res => { 
       let temp = res.map(a => new Project(a)); 

       if (active) { 
        this.projects.next(temp); 
       } else { 
        this.externalProjects.next(temp); 
       } 
       return true; 
      }) 
     .catch(() => Observable.of(false)); 
} 

そして第二：

public projects$: Observable<Project[]> = this._projectsService.projects; 
public showIntro$: Observable<boolean> = this.projects$ 
    .map(projects => projects.length > 0); 

ngOnInit(): void { 
    // ...nothing to do here 
} 

を手動代わり async -pipeを使用し、クラスメンバーに結果を書き込むために無限のストリームにサブスクライブしないでください

テンプレート：

<div class="project" [hidden]="!showIntro" *ngFor="let project of (projects$ | async)> 
    {{project.title}} 
</div> 
....somewhere else: 
<div *ngIf="showIntro$ | async">INTRO!</div> 

---

あなたの負荷の問題が解決しない場合は、あなたが共有したい場合がありますapi.sendメソッドの内容（それが確実に呼び出されていない限り）

一つの可能​​性は、あなたが次のことをしようとする場合があり、ngZoneの外で実行されている非同期メソッドを持っているだろう：

• を注入NgZoneあなたの中（「角度/コア@」より）サービス
• ngZone.run
• NgZoneの詳細についてはこちらをご覧内部this._api.send -call内部オペレーションラップ：https://angular.io/docs/ts/latest/api/core/index/NgZone-class.html