Quantcast
Channel: ASP.NET Core
Viewing all articles
Browse latest Browse all 9386

Angular 2 Observable not working

$
0
0

The code works for _collectionObserver although not for _itemObserver. What I am trying to achieve is share the selected item from AppComponent from where the DataService is called and display the selection in SelectItemComponent.

The code works up to the point in DataService until:

    selectItem(item: TodoItem) {
        this._item = { Name: item.Name, Key: item.Key };
        this._itemObserver.next(this._item);
    }

DataService

import { Injectable, Inject } from 'angular2/core';
import { Http, Response, Headers } from 'angular2/http';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';
import { TodoItem } from './TodoItem';
import 'rxjs/add/operator/share';

@Injectable()
export class DataService {
    public collection$: Observable<Array<TodoItem>>;
    private _collectionObserver: any;
    private _collection: Array<TodoItem>;
    private headers: Headers;
    public item$: Observable<TodoItem>;
    private _itemObserver: any;
    private _item: TodoItem;

    constructor( @Inject(Http) private http: Http) {
        this.http = http;
        this.headers = new Headers();
        this.headers.append('Content-Type', 'application/json');
        this._collection = new Array<TodoItem>();
        this.collection$ = new Observable(observer => {
            this._collectionObserver = observer;
        }).share();
        this.item$ = new Observable(observer => {
            this._itemObserver = observer;
        }).share();
    }

    getItems() {
        this.http.get('/api/todo').map((res: Response) => res.json())
            .subscribe((items: Array<TodoItem>) => {
                this._collection = items;
                this._collectionObserver.next(this._collection);
            });
    }

    addItem(item: TodoItem) {
        this.http.post('/api/todo', JSON.stringify(item), { headers: this.headers })
            .map((res: Response) => res.json())
            .subscribe((data: TodoItem) => {
                this._collection.push(data);
                this._collectionObserver.next(this._collection);
            });
    }

    selectItem(item: TodoItem) {
        this._item = { Name: item.Name, Key: item.Key };
        this._itemObserver.next(this._item);
    }
}

AppComponent

import { Inject, Component } from 'angular2/core';
import { DataService } from './data.service';
import { TodoItem } from './TodoItem';
import { AddItemComponent } from './add-item.component';
import { SelectItemComponent } from './select-item.component';

@Component({
    selector: 'app',
    directives: [
        AddItemComponent,
        SelectItemComponent
    ],
    templateUrl: 'templates/app.html'
})

export class AppComponent {
    private items: Array<TodoItem> = new Array<TodoItem>();
    private item: TodoItem;

    constructor(@Inject(DataService) public dataService: DataService) { }

    ngOnInit() {
        this.dataService.collection$.subscribe(latestCollection => {
            this.items = latestCollection;
        });

        this.dataService.getItems();
    }

    onSelect(item: TodoItem) {
        this.item = { Name: item.Name, Key: item.Key };
        this.dataService.selectItem(this.item);
    }

}

SelectItemComponent

import { Component, Inject } from 'angular2/core';
import { TodoItem } from './TodoItem';
import { DataService } from './data.service';
import { Observable } from 'rxjs/Observable';

@Component({
    selector: 'select-item',
    templateUrl: 'templates/select-item.html'
})

export class SelectItemComponent {
    public selectedItem: TodoItem;
    public item$: Observable<TodoItem>;
    private _itemObserver: any;

    constructor(@Inject(DataService) public dataService: DataService) { }

    ngOnInit() {
        this.dataService.item$.subscribe(latestItem => {
            this.selectedItem = latestItem;
        });
    }
}

 


Viewing all articles
Browse latest Browse all 9386

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>