Angular 4訂閱observable不會更新後更新

我有一個服務，通過組件訂閱的observable。這似乎在訂戶顯示初始值時起作用。我有另一個組件，然後更新observable但是新值沒有顯示。Angular 4訂閱observable不會更新後更新

服務：

import { Injectable } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/observable/of'; 

@Injectable() 

export class BannerService { 

    banners$: Observable<any[]> = Observable.of([]); 

    getBanners(): Observable<any[]> { 
     return this.banners$; 
    } 

    setBanners(banners: any[]): void { 
     this.banners$ = Observable.of(banners); 
    } 

}

組件與用戶：

import { Component, ViewEncapsulation, OnInit } from '@angular/core'; 

import { BannerService } from './../banner/banner.service'; 

@Component({ 
    selector: '.banner', 
    templateUrl: './banner.component.html', 
    styleUrls: ['./banner.component.sass'], 
    encapsulation: ViewEncapsulation.None 
}) 

export class BannerComponent implements OnInit { 

    constructor(private bannerService: BannerService){} 

    ngOnInit() { 
     this.bannerService.banners$.subscribe(banners => { 
      console.log(banners); 
     }); 

    } 
}

組件與二傳：

import { Component, ViewEncapsulation, OnInit } from '@angular/core'; 

import { BannerService } from './../banner/banner.service'; 

@Component({ 
    selector: '.home-component', 
    templateUrl: './home.component.html', 
    styleUrls: ['./home.component.sass'], 
    encapsulation: ViewEncapsulation.None 
}) 

export class HomeComponent implements OnInit { 

    data = { 
     banners: [ 
      { 
       title: 'Title 1', 
       image: '../images/image1.jpg' 
      }, 
      { 
       title: 'Title 2', 
       image: '../images/image2.jpg' 
      }, 
      { 
       title: 'Title 3', 
       image: '../images/image3.jpg' 
      } 
     ] 
    } 

    constructor(private bannerService: BannerService){} 

    ngOnInit(): void { 
     this.bannerService.setBanners(this.data.banners); 
    } 

}

任何幫助將非常感激，我已經嘗試了一堆不同事情，並不能得到它的工作。

來源

2017-08-16 Steve

發行不與此修復程序解決，誰能幫助https://stackoverflow.com/questions/48973734/model-updates-but-angular-ui-does -not-rerender – kasimkha

您訂閱一個observable，然後用另一個替換該observable。

這就像給某人一個電子郵件地址，他可以在那裏讀取發送給他的郵件，但是每次發送電子郵件時都會用另一個郵件地址替換該電子郵件地址。顯然，如果您將郵件發送到不同的地址，收件人將永遠不會收到您的郵件。

您需要使用相同的，獨特的observable，並使其發出新的事件。使用主題是做到這一點的最簡單的方法：

banners$: Subject<any[]> = new BehaviorSubject<any[]>([]); 

setBanners(banners: any[]): void { 
    this.banners$.next(banners); 
}

來源

2017-08-16 17:03:41

太棒了！感謝您的快速回復。它似乎現在正在工作，我不得不將它更改爲「新BehaviorSubject（[]）」，因爲尖括號導致錯誤。 – Steve

啊，對不起。我混淆了Java和TS。 –

Angular 4訂閱observable不會更新後更新

回答

相關問題