角2：コンポーネントが観測するサービスに配列を変更する方法は？

Question

NotificationsBellComponentでサービスの配列の変更を受信したいのですが。 _LocalStorageServiceがデータを正しく返信しているとします。

Q）コンポーネントがサービスコレクションに変更を受け取るようにするにはどうすればよいですか？

これまで成分：

@Component({ 
    selector: 'notifications-bell', 
    directives: [], 
    templateUrl: 'build/components/notificationsBell/notificationsBell.html', 
    styles: [` 
     button{ 
      background: none !important; 
      background-color: none !important; 
      box-shadow: none !important; 
     } 
    `] 
}) 
export class NotificationsBellComponent { 

    private notifications: string[]; 

    constructor(
     private _platform: Platform, 
     private _nav: NavController, 
     private _events: Events, 
     private _ConfigService: ConfigurationService, 
     private _NotificationService: NotificationService 
    ) { 
     this.notifications = this._NotificationService.notifications; 
    } 
} 

これまでサービス：

@Injectable() 
export class NotificationService { 

    public notifications: string[]; 

    constructor(
    private _ConfigService: ConfigurationService, 
    private _LocalStorageService: LocalStorageService, 
    private _I8nService: I8nService, 
    private _events: Events 
) { 
    this.getData(); 
    } 

    getData() { 
    this._LocalStorageService.getNotifications().then((data) => { 
     var list: string[] = []; 
     if (data.res.rows.length > 0) { 
     for (var i = 0; i < data.res.rows.length; i++) { 
      list.push(data.res.rows.item(i).notification); 
     } 
     } 
     this.notifications = list; 
    }); 
    } 

    addItem(description: string) { 
    this._LocalStorageService.addNotification(description).then(() => { 
     this.getData(); 
    }); 
    } 
} 

Answer 1

getData()新しいlistアレイに約束を解決するたびにnotificationsを割り当てます。コンポーネントには元のlist配列への参照が引き続きあります。その上

代わりに新しいアレイを毎回割り当てる

、外にだけはっきりとpush()新しいデータ：サービスの配列を作成しないことにより

export class NotificationService { 
    public notifications: string[]; 
    getData() { 
    this._LocalStorageService.getNotifications().then((data) => { 
     this.notifications.length = 0; // clear array, but keep same reference 
     if (data.res.rows.length > 0) { 
     for (var i = 0; i < data.res.rows.length; i++) { 
      this.notifications.push(data.res.rows.item(i).notification); 
     } 
     } 
    }); 
    } 
    ... 
} 

Answer 2

。

この観察可能なシーケンスの「チェーンを壊している」：あなたのコンポーネントにオブザーバブルが必要で、あなたはLocalStorageServiceから観測可能なものを得ているので、これをモデル化する必要がありますあなたのサービスでそれを分解するのではなく、すべての方法でストリームとして。

ような何か：

@Injectable() 
export class NotificationService { 

    public notifications$: Observable<string[]>; 

    constructor(
    private _ConfigService: ConfigurationService, 
    private _LocalStorageService: LocalStorageService, 
    private _I8nService: I8nService, 
    private _events: Events 
    ) { 
     this.notifications$ = this._LocalStorageService.getNotifications() 
      .map(notifications => { 
       // modify the notifications however you need to her 
      }) 

    } 
} 

次に、あなたのサービスでは、することができますsubscribe()service.notifications$へ。