Две наблюдаемые переменные, зависящие друг от друга

Question

Мне нужен совет о том, как сделать видимую переменную currentShop в зависимости от переменной shopList.

AppComponent читает shopList через shopProvider. Он работает без проблем, но мне нужно изменить код, чтобы установить currentShop из загруженных магазинов.

Спасибо.

AppComponent:

export class AppComponent { 

    currentShop; 
    shopList; 

    constructor(router: Router,shopProvider:ShopProvider){ 
     this.shopList = shopProvider.shops; 
     this.currentShop = shopProvider.currentShop; 

     shopProvider.loadShops(); 
     shopProvider.setCurrentShop(-1); 

     router.navigate(['/System']); 
    } 
} 

ShopProvider:

export class ShopProvider{ 

    private _http:Http; 

    shops:Observable<Array<Shop>>; 

    currentShop:Observable<Shop>; 

    private obServer:any; 

    private _shopDataStore : { 
     shops: Array<Shop> 
    } 

    constructor(http:Http){ 
     this._http = http; 
     this.shops = new Observable(observer => this.obServer = observer).share(); 
     //this.currentShop = ?? 
     this._shopDataStore = {shops: []}; 
    } 

    setCurrentShop(shopId:number){ 
     //Code ?? 
    } 

    loadShops(){ 
     this._http 
      .get('/services/shop/list') 
      .map(res => res.json()) 
      .subscribe(data => { 
       this._shopDataStore.shops = data; 
       this.obServer.next(this._shopDataStore.shops); 
      }) 
    } 
} 

HTML:

<div>{{currentShop.name | async}}</div> 

<ul> 
    <li *ngFor="#shop of shopList | async"> 
     <a [routerLink]="['/Shop', {shopId: shop.id}]"> 
      <span>{{shop.name}}</span> 
     </a> 
    </li> 
</ul> 

Answer 1

Я хотел бы пойти на дуге hitecture больше похож на:

ShopService

class Shop { 
    constructor(public shopId: Number, public shopName: string) {} 
} 

@Injectable() 
class ShopService { 
    shops: Observable<Array<Shop>> = new Observable<Array<Shop>>(); 
    shopId: Subject<Number> = new Subject<Number>(); 
    currentShop: Observable<Shop> = new Observable<Shop>(); 

    public static getShopById(shops: Array<Shop>, shopId: Number): Shop { 
    return shops.filter(shop => shop.shopId === shopId)[0]; 
    } 
    public static compareShops(oldShop: Shop, newShop: Shop): Boolean { 
    return oldShop.shopId === newShop.shopId; 
    } 

    constructor(@Inject(Http) private http: Http) { 
    this.shops = this.http 
     .get('**url here**') 
     .map(res => res.json().shops); 

    this.currentShop = this.shops 
     .combineLatest(this.shopId, ShopService.getShopById) 
     .distinctUntilChanged(ShopService.compareShops); 
    } 

    setCurrentShop(shopId: Number): void { 
    this.shopId.next(shopId); 
    } 
} 

Использование в вашем Component:

• сохранить ShopService.currentShop к переменной в Component (скажем this.currentShop
• использования {{ currentShop | async }} или .subscribe() к наблюдаемый ShopService.currentShop для получения магазина при его изменении

См. рабочий пример на CodePen. Мне нравится этот подход больше, потому что я не сохраняю никакого состояния, которое, похоже, больше соответствует реактивному программированию.

Answer 2

Я предлагаю followin г:

ShopProvider

private shopsObserver:Observer<Shop[]>; 
private currentShopObserver: Observer<Shop>; 
private _shopDataStore : { 
    shops: [], 
    currentShop: undefined 
} 

constructor(http:Http){ 
    this._http = http; 
    this.shops = new Observable(observer => this.obServer = observer).share(); 
    this.currentShop = new Observable(observer => this.shopObserver = observer).share(); 

} 

setCurrentShop(shopId:number){ 
    var item = this._shopDataStore.shops.find(item=>item.shopId == shopId); 
    this._shopDataStore.currentShop = item; 
    this.currentShopObserver.next(this._shopDataStore.currentShop); 
} 

loadShops(){ 
    this._http 
     .get('/services/shop/list') 
     .map(res => res.json()) 
     .subscribe(data => { 
      this._shopDataStore.shops = data; 
      this.shopsObserver.next(this._shopDataStore.shops);     
     }) 
} 

AppComponent

export class AppComponent { 

    currentShop; 
    shopList; 

    constructor(router: Router,shopProvider:ShopProvider){ 
     shopProvider.shops.subscribe(shops=>this.shopList = shops); 
     shopProvider.currentShop.subscribe(currentShop => this.currentShop = currentShop); 

     shopProvider.loadShops(); 
     shopProvider.setCurrentShop(-1); 

     router.navigate(['/System']); 
    } 
} 

HTML

<div>{{currentShop?.name}}</div> 

<ul> 
    <li *ngFor="#shop of shopList"> 
     <a [routerLink]="['/Shop', {shopId: shop.id}]"> 
      <span>{{shop.name}}</span> 
     </a> 
    </li> 
</ul>