Angular2 TypeScript 可观察问题

Question

我正在使用 Angular 2.0.0-beta.0 和 TypeScript 1.7.5

在 class Test 的方法 saveResource 中，resourceId 的资源需要从 this.resources 类型 Observable<Resource[]> 中提取，并且分配给 this.resourceToSave 类型 Resource。这样可以使用代码将更改的资源存储在数据库中：this.resourceService.updateResource(this.resourceToSave).subscribe()

执行此操作的正确代码是什么？

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);

Answer 1

为什么你不能直接提供 resource 因为你从 ngFor 循环中调用了 saveResource 方法:

<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>

这样您就不必从其 id 中获取资源...

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

否则很难从observable中得到资源列表。您需要将其保存到组件的专用属性中...

Angular2 TypeScript 可观察问题

Angular2 TypeScript Observable issue

observable

typescript

angular