如何通过RXJS主题使用服务器端过滤和分页时允许多项选择(复选框)

Question

我需要使用Angular 4.3 HttpClient从我的REST api请求数据.我的组件使用Subject类来提供服务器端过滤(当用户键入术语时)和分页,但我还需要使用结果数据网格中的复选框允许多个项目选择.

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

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

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

我错过了什么？

这是完整的组件来源:

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

Answer 1

[(ngModel)]="vehicle.checked"我认为你应该在复选框绑定中使用。

[ngModel]="vehicle.checked"只是单向绑定，当车辆的选中属性更改时，它只会更改 ui。

如果你想让复选框影响选中的属性，你应该使用双向绑定，即[(ngModel)]="vehicle.checked"。