Подключить массив к Observable без .interval() в Angular2 Typescript

Есть ли способ сделать эту же функциональность без части "interval()"?

Я просто хочу подключить массив к наблюдаемому, а затем просто обновить массив и наблюдаемый объект, чтобы наблюдать за этим массивом и реагировать.

Если это хорошее решение, есть ли способ реализовать и где .distinctUntilChanged() в него, чтобы он не выдавал новые значения, если данные одинаковы, тогда этот «интервал (10)» не будет горлышко бутылки.

Вот плункер: http://plnkr.co/edit/xlWSTz8gNfByTnT1REw5?p=preview

import {Component} from 'angular2/core';
import * as Rx from 'rxjs/Rx'

@Component({
    selector: 'a-webapp',
    template:`

    <div>
    <h2>{{name}}</h2>

    <button (click)="addToArray()">Add</button> <button (click)="resetArray()">Reset</button>
    <ul>
        <li *ngFor="let item of latest$ | async">{{ item | json  }}</li>
    </ul>

    {{ data | json }}

    </div>

    `
})
export class AppComponent {

    data = ["one", "two", "three"]
    data$: Rx.Observable<Array<string>>;
    latest$: Rx.Observable<Array<string>>;

    constructor() {}

    ngOnInit() {

        this.data$ = Rx.Observable.interval(10).concatMap(y => {
            return Rx.Observable.of(this.data)
        })

        this.latest$ = Rx.Observable.combineLatest(this.data$, (data) => {
            return data.map(d => {
                return d + " is a number"
            })
        })
    }

    addToArray() {
        this.data.push('more numbers')
    }

    resetArray() {
        this.data = ["one", "two", "three"]
    }

}

typescript angular rxjs rxjs5
person Teddy    schedule 28.06.2016    source источник

Ответы (1)


arrow_upward
14
arrow_downward

«... и наблюдаемое, чтобы наблюдать за этим массивом и реагировать»

Я думаю, что лучше, чтобы наблюдаемое испускало новое значение каждый раз, когда этот массив изменяется

В твоем случае:

export class AppComponent {
  data = ["one", "two", "three"];
  data$: Rx.BehaviorSubject<Array<string>>; // or data$: Rx.Subject<Array<string>>
  latest$: Rx.Observable<Array<string>>;

  constructor() {}

  ngOnInit() {
    this.data$ = new Rx.BehaviorSubject<Array<string>>(this.data);

    this.latest$ = this.data$.map(data => data.map(
      d => "" + d + " is a number"
    ));
  }

  addToArray() {
    this.data.push('more numbers');
    this.data$.next(this.data);
  }

  resetArray() {
    this.data = ["one", "two", "three"];
    this.data$.next(this.data);
  }
}
person Can Nguyen    schedule 29.06.2016
comment
Попробую это в ближайшие 24 часа. Приму ответ, если получится ;) Большое спасибо! - person Teddy; 29.06.2016
comment
Работает отлично! ;)) Ты человек! - person Teddy; 29.06.2016