Доброго времени суток!
У меня есть сервис TttService. У него есть свойство cells. Это массив объектов. Оно изменяется только на клиенте. Один компонент подписывается на его изменения, другой - меняет. Внимание вопрос: я хочу чтобы метод makeAMove() изменил одно из свойств нужного объекта в массиве cells и при том тот компонент что подписан на свойство cells должен получить эти изменения. Как это можно реализовать?
P.S. если в методе makeAMove() сделать console.log(this.cells) - там будет пусто. При том компонент который подписан на cells через метод initCells() в первый раз получает изменения.
Сервисimport { Injectable } from '@angular/core';
import { TttServiceInteface } from '../interfaces/ttt-service-inteface';
import { CellInteface } from '../interfaces/cell-interface';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { asObservable } from './asObservable';
@Injectable()
export class TttService {
public cells: BehaviorSubject<CellInteface[]> = new BehaviorSubject([]);
constructor() { }
initCells(fieldSize: number, fieldWidth: number): Observable<CellInteface[]> {
const cells = [];
for (let i = 0; i < fieldSize * fieldSize; i++) {
cells.push({
width: fieldWidth,
height: fieldWidth,
id: i
});
}
this.cells.next(cells);
return this.cells;
}
getCells() {
return asObservable(this.cells);
}
makeAMove(id: number) {
this.getCells()
.subscribe((c: Array<CellInteface>) => {
c.forEach(cell => {
if (cell.id === id && !cell.id) {
cell.value = 1;
}
});
this.cells.next(c);
});
}
КомпонентngOnInit() {
const border = (window.screen.availHeight - 150);
this.fieldSize = 5;
this.border = border + 100;
this.tttService
.initCells(this.fieldSize, border / this.fieldSize)
.subscribe(cells => {
console.log(cells);
this.cells = cells;
});
}