RxJS Items and Corner 2 Components

Question

I agree that web development is changing and I need to deal with RxJS. I am currently developing a web application using Angular 2.0.0-beta.15.

I follow the excellent ng-book 2 (is such advertising allowed?) It covers the broad, shallow touches of some important concepts in RxJS and provides links for further reading. I read and understood the source code and the accompanying explanation, but I blushed a little about some details regarding Subject in particular and how Angular 2 components consume these Subject streams.

I added the code from the book:

 export class SubmitResourceComponent { private _newResourceTags: Subject<Tag> = new Subject<Tag>(); private _resourceTags: Observable<Tag[]>; private _tagUpdates: Subject<any> = new Subject<any>(); private _create: Subject<Tag> = new Subject<Tag>(); private _remove: Subject<Tag> = new Subject<Tag>(); constructor() { this._resourceTags = this._tagUpdates .scan((tags: Tag[], operation: ITagsOperation) => operation(tags), initialTags); this._create .map((tag: Tag): ITagsOperation => (tags: Tag[]) => _.uniq(tags.concat(tag))) .subscribe(this._tagUpdates); this._remove .map((tag: Tag): ITagsOperation => (tags: Tag[]) => _.without(tags, tag)) .subscribe(this._tagUpdates); this._newResourceTags.subscribe(this._create); } get resourceTags(): Observable<Tag[]> { return this._resourceTags; } protected addTagToResource(tag: Tag): void { this._create.next(tag); } protected removeTagFromResource(tag: Tag): void { this._remove.next(tag); } } 

And I consume _resourceTags as follows:

 <button class="btn" *ngFor="#tag of resourceTags | async" (click)="removeTagFromResource(tag)">{{ tag.name }}</button> 

What I cannot understand, even with excellent support on gitter forums, is why the user interface displays all the tags that fit in _resourceTags Subject . I would suggest that the stream looks like a rubber tube: as soon as an element has been pressed into a Subject and published to any Observer (in this case, a UI element), does it not evaporate and disappear? Does it stay in the stream / pipe / Subject ? How does a user interface element subscribe to a Subject ? Am I thinking about it wrong? Do I need a complete psychiatric restructuring / transplant?

So many questions!

Answer 1

The data passed to next is like an event. The subscriber receives the value, and the Observable created by Subject does not contain any reference to it (except for the use of special operators for the purpose of buffering or in other ways to save the emitted values.

C | async | async Angular subscribes to Observable ( Subject ), and when it receives the value, it displays it.

*ngFor only displays arrays. If you want to use *ngFor with Subject , the subject must emit arrays - each event is not a single value, but an array of values, and these values ​​are displayed *ngFor and replaced with other values ​​when Observable emits a new array.

scan operator

Your code example uses the scan operator to accumulate the emitted values ​​and redirect the array that contains all the values ​​issued so far, each time it receives a new event, as required *ngFor .

Answer 2

I think that the observables store the values ​​of the variable in the browser’s memory only until the session is cleared, just as you would set the variable to get the value from the input field, and when the update is hit in the browser, the values ​​are empty. In the above scenario, I would think that, like most SPA centers, the browser is not allowed to perform the default update / reboot, and you get some persistence, so when you perform an operation like

 ... _.uniq(tags.concat(tag))).subscribe(this._tagUpdates);... 

values ​​continue to accumulate as they are instantiated by the create event, but will disappear when manual updating on the page occurs and clear the session

EDIT

Perhaps my question is wrong, but I mean the following: _resourceTags is started empty, the value is created by the create event, now _resourceTags [newValue # 1] angular detects changes and rerenders _resourceTags using ngFor, after creating a new _resourceTags event now [newValue # 1 , newValue # 2] angular rerenders showing both points. If the stream is not stored in an online database, such as firebase or offline, for example websql, this means that when you restart the browser, _resourceTags will return to empty