Currently, I'm working with Angular 2.0.0-beta.0 and TypeScript 1.7.5
I have a scenario where I need to extract the resource identified by resourceId from the array of resources stored in this.resources, which is of type Observable<Resource[]>. Once extracted, this resource should be assigned to this.resourceToSave, which is of type Resource. This will enable me to update the changed resource in the database using the following code:
this.resourceService.updateResource(this.resourceToSave).subscribe()I would appreciate assistance with writing the correct code for this operation.
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) {
// Code implementation needed to handle 'this.resources' and 'resourceId' to assign value to 'this.resourceToSave'
this.resourceService.updateResource(this.resourceToSave)
.subscribe();
}
}
bootstrap(Test);