CODEWITHSUNDEEP
typescriptangularobservable
Herman Fransen
Herman Fransen

Reputation: 2220

Angular2 TypeScript Observable issue

I am using Angular 2.0.0-beta.0 and TypeScript 1.7.5

In the method saveResource of the class Test the resource with resourceId needs to be extracted from this.resources type Observable<Resource[]> and assigned to this.resourceToSave type Resource. This way the changed resource can be stored in the database using the code: this.resourceService.updateResource(this.resourceToSave).subscribe()

What is the correct code to do this?

import {bootstrap}         from 'angular2/platform/browser';
import {Component}         from 'angular2/core';
import {HTTP_PROVIDERS}    from 'angular2/http';
import {Observable}        from 'rxjs/Observable';
import {Subject}           from 'rxjs/Subject';
import 'rxjs/Rx';

import {Resource} from './classes/resource';
import {ResourceService} from "./services/resource-service";

@Component({
    selector: 'my-app',
    template: `
    <div class="container">
        <div>
            <h3>Resources Maintenance</h3>
            <div class="form-group">
                <label for="inputUser">Search</label>
                <input #inputUser (keyup)="search(inputUser.value)" autofocus>
            </div>
            <table style="width:65%" class="table-striped">
            <thead>
            <tr>
                <th>Resource</th>
                <th>Stock</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="#resource of resources | async">
                <td>{{resource.name}}</td>
                <td>
                    <div class="form-group">
                        <input type="number" class="form-control" [(ngModel)]="resource.stock" (change)="saveResource(resource._id)">
                    </div>
                </td>
            </tr>
            </tbody>
            </table>
        </div>
    </div>
    `,
    providers: [HTTP_PROVIDERS, ResourceService]
})

export class Test {

    private searchTermStream = new Subject<string>();

    private resources: Observable<Resource[]> = this.searchTermStream
        .debounceTime(500)
        .distinctUntilChanged()
        .switchMap((value: string) =>
            value.length > 0 ? this.resourceService.searchResources(value) : Observable.of([]))

    private resourceToSave: Resource;

    constructor (private resourceService: ResourceService) {}

    search(value: string) {
        this.searchTermStream.next(value);
    }

    saveResource (resourceId) {
        // this.resourceToSave = do something with 'this.resources' and 'resourceId'
        this.resourceService.updateResource(this.resourceToSave)
           .subscribe();
    }
}

bootstrap(Test);

Upvotes: 0

Views: 284

Answers (1)

Thierry Templier
Thierry Templier

Reputation: 202306

Why can't you directly provide the resource since you call the saveResource method from the ngFor loop:

<tr *ngFor="#resource of resources | async">
  <td>{{resource.name}}</td>
  <td>
    <div class="form-group">
      <input type="text" class="form-control" [(ngModel)]="resource.stock" (change)="saveResource(resource)">
    </div>
  </td>
</tr>

This way you wouldn't have to get the resource from its id...

saveResource (resourceToSave) {
  this.resourceService.updateResource(resourceToSave)
       .subscribe();
}

Otherwise it would be difficult to get the list of resources from the observable. You'd need to save it into a dedicated property of your component...

Upvotes: 2

Related Questions