通知可能なSubjectを提供するサービスは通知を受け取りません

Question

EventSpinnerコンポーネントは、EventsServiceによって提供されるアイコンに加入します。

@Component({ 
    selector: 'event-spinner', 
    template: ` 
<div class="col-xs-5"> 
    Test <i class="fa fa-2x" [ngClass]="{'fa-check': icon == 'ok', 'fa-spin': icon == 'loading', 'fa-spinner': icon == 'loading', 'fa-times': icon == 'error'}" id="spin"></i> 
</div> 
    ` 
}) 
export class EventSpinner implements OnInit { 
    icon: string; 

    constructor(public eventsService: EventsService) { 
    } 

    ngOnInit(): void { 
     this.eventsService.icons.subscribe((icon) => { 
      let old = this.icon; 
      this.icon = icon; 
      console.log("this.icon = " + this.icon + " (was " + old + ")"); 
     }); 
    } 

} 

icons.nextは、角度/ http.get状態変化（ "ロード"/"OK"/"エラー"）@使用している場合、Webサービスの要求と呼ばれています。しかし、これが起こると、iタグのクラスは更新されません。何か案が？

EventsService.ts

@Injectable() 
export class EventsService { 
    icons: Subject<string> = new Subject<string>(); 

    constructor(public http: Http) { 
    } 

    subscribe(): Observable<Event[]> { 
     let url = (<any>window).__ext.API_URL + 'event/view'; 
     let obs; 
     return Observable 
      .create((o) => { 
       obs = o; 
       obs.next(); 
      }) 
      .flatMap(() => { 
       this.icons.next("loading"); 
       console.log("executing request"); 
       return this.http.get(url) 
      }) 
      .retryWhen(error => { 
       this.icons.next("error"); 
       return error.delay(3000); 
      }) 
      .map((response: Response) => { 
       this.icons.next("ok"); 
       console.log("response received"); 
       setTimeout(() => { 
        console.log("pushing next"); 
        obs.next(); 
       }, 1000); 
       return (<any>response.json()).map(item => { 
        return item; 
       }); 
      }); 
    } 
} 

Answer 1

それはEventServiceの実装によって引き起こされるかもしれないまたはngClassの問題かもしれませんが、手動で起動する変化検出は、問題を回避する必要があります。

export class EventSpinner implements OnInit { 
    icon: string; 

    constructor(public eventsService: EventsService, private cdRef:ChangeDetectorRef) { 
    } 

    ngOnInit(): void { 
     this.eventsService.icons.subscribe((icon) => { 
      let old = this.icon; 
      this.icon = icon; 
      console.log("this.icon = " + this.icon + " (was " + old + ")"); 
      this.cdRef.detectChanges(); 
     }); 
    } 
} 

Answer 2

使用方法：

new Observable(...); 

代わりに、静的

X.create(); 

固定すべての私の問題の

と

new BehaviorSubject(...); 

。