angular – 如何在使用服务器端过滤和通过RXJS主题分页时允许多

我有以下代码来创建数据网格：

<tr *ngFor="let vehicle of vehicles$| async">
    <td><input type="checkbox" name="vehicle-selection" id="vehicle-{{vehicle.id}}" value="{{vehicle.id}}" [ngModel]="vehicle.checked" (ngModelChange)="setChecked(vehicle.id,$event)" /></td>
    <td>{{vehicle.chassis}}</td>
    <td>{{vehicle.lastUpdate || '' | amFromUtc | amDateFormat: 'DD/MM/YYYY'}}</td>
    <td>{{vehicle.description}}</td>
    <td>{{vehicle.location}}</td>
</tr>

车辆$是可观察的< Vehicle []>并且数据显示正确,但是,当我更改某些复选框的选中状态时,数据绑定observable中的vehicle.checked属性不会更改.

我错过了什么？

这是完整的组件来源：

import { Component,OnInit,AfterViewInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import { Router } from '@angular/router';

import { NotificationsService } from 'angular2-notifications';
import { ConfirmationService } from '@jaspero/ng2-confirmations';

import 'rxjs/add/observable/of';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/merge';
import 'rxjs/add/operator/pluck';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/switchMap';


import { ResolveEmit,ConfirmSettings } from '../../shared/interfaces/jaspero';
import { VehiclesService } from '../../core/services/vehicles.service';
import { Vehicle } from '../../shared/interfaces/vehicle';
import { PagedResults } from 'app/shared/interfaces/paged-results';
import { distinctUntilChanged } from 'rxjs/operator/distinctUntilChanged';

@Component({
  selector: 'app-vehicles-search',templateUrl: './vehicles-search.component.html',styleUrls: ['./vehicles-search.component.scss'],providers: [VehiclesService]
})
export class VehiclesSearchComponent implements OnInit {
  vehicles$: Observable<Vehicle[]>;
  totalRecords$: Observable<number>;
  page = 1;
  searchTerm = '';

  searchTermStream = new Subject<string>();
  pageStream = new Subject<number>();

  constructor(
    private vehiclesService: VehiclesService,private router: Router,private notification: NotificationsService,private confirmation: ConfirmationService
  ) { }

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

  assignAnomaly() {
    this.vehicles$
      .map(m => {
        console.log(m); return m.filter(f => f.checked);
      })
      .subscribe(res => {
        if (res.length < 1) {
          this.notification.warn('Associar Anomalia','Você deve selecionar um veículo antes.');
        }
      });
  }

  setPage(page: number) {
    this.pageStream.next(page);
  }

  ngOnInit(): void {
    const searchSource = this.searchTermStream
      .debounceTime(300)
      .distinctUntilChanged()
      .map(term => {
        this.searchTerm = term;
        return { search: term,page: 1 };
      });

    const pageSource = this.pageStream
      .map(pageNumber => {
        this.page = pageNumber;
        return { search: this.searchTerm,page: pageNumber };
      });

    const source = pageSource
      .merge(searchSource)
      .startWith({ search: this.searchTerm,page: this.page })
      .switchMap((params: { search: string,page: number }) => {
        return this.vehiclesService.getVehicles(params.search,params.page);
      });

      this.totalRecords$= source.pluck('totalRecords');
      this.vehicles$= source.pluck('results');
  }

  setChecked(val,ev) {
    console.log(val);
    console.log(ev);
  }
}

Http服务

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { HttpClient } from '@angular/common/http';
import { environment } from '../../../environments/environment';

import { PagedResults } from '../../shared/interfaces/paged-results';
import { Vehicle } from '../../shared/interfaces/vehicle';

import 'rxjs/add/operator/toPromise';
import { forEach } from '@angular/router/src/utils/collection';

@Injectable()
export class VehiclesService {

  private baseUrl = `${environment.apiUrl}/api/vehicles`;  // URL to web api

  constructor(private http: HttpClient) { }

  getVehicles(filter: string,page: number): Observable<PagedResults<Vehicle[]>> {
    filter = filter ? `/${filter}` : '';
    return this.http
      .get<Vehicle[]>(`${this.baseUrl}/page/${page}${filter}`,{observe: 'response'})
      .map((res) => {
        const totalRecords = +res.headers.get('X-InlineCount');
        const results = res.body;

        for (let i = 0; i < results.length; i++) {
          results[i].checked = false;
        }

        return {
          results: res.body,totalRecords: totalRecords
        };
      })
      .catch(this.handleError);
  }

  getVehicleById(id: number): Observable<Vehicle> {
    return this.http.get(`${this.baseUrl}/${id}`)
      .map((res: Response) => res.json())
      .catch(this.handleError);
  }

  private handleError(error: any): Promise<any> {
    console.error('An error occurred',error);
    return Promise.reject(error.message || error);
  }
}