ng-bootstrap /关于可用数据的全文本搜索示例

Question

我必须在一个表上实现搜索/过滤器功能，并且遵循了一个ngbootstrap示例，您可以在其页面（https://ng-bootstrap.github.io/#/components/table/examples）上找到该示例。 我正在尝试使用Observables和formcontrol，以通过搜索方法呈现过滤列表。

这是我的组件：

import { Component, PipeTransform } from '@angular/core';
import { Router } from '@angular/router';
import { ReservationService} from '../../service/reservation.service';
import { Reservation } from '../../model/reservation';
import { JwtHelperService } from "@auth0/angular-jwt";
import { DecimalPipe } from '@angular/common';
import { FormControl/*, ReactiveFormsModule*/ } from '@angular/forms';
import { startWith, map } from 'rxjs/operators';
import { Observable , of, Subject } from 'rxjs';


@Component({
    selector: 'reservation-list',
    templateUrl: './reservation-list.component.html',
    providers: [DecimalPipe]
})
export class ReservationListComponent {
    reservations: Reservation[];
    //reservations: Subject<Reservation[]>;
    reservations$: Observable<Reservation[]>;
    helper = new JwtHelperService();
    page: number;
    pageSize: number;
    filter = new FormControl('');

constructor(private router: Router, private reservationService: ReservationService, pipe: DecimalPipe){
    this.reservations$ = this.filter.valueChanges.pipe(
        startWith(''),
        map(text => this.search(text, pipe))
    )
}

ngOnInit(){
    if(this.helper.isTokenExpired(localStorage.getItem('token'))){
        this.router.navigateByUrl('login')
    }

    this.page = 1;
    this.pageSize = 7;
    this.getUserReservations();
}

private getUserReservations(): void{
    const decodedToken = this.helper.decodeToken(localStorage.getItem('token'));
    this.reservationService.getReservations(decodedToken.logger.id)
        .subscribe(reservations => {
            this.reservations = reservations;
            this.reservations$ = of(reservations);
        });
}

private deletReservation(id: number): void{
    this.reservationService.deleteReservation(id)
        .subscribe(deleted => {
            if(deleted){
                this.reservations = this.reservations.filter(item => item.id != id);
                this.reservations$ = of(this.reservations);
            }
        });
}

private search(text: string, pipe: PipeTransform): Reservation[] {
    return this.reservations.filter(reservation => {
      const term = text.toLowerCase();
      return reservation.location.toLowerCase().includes(term)
          || pipe.transform(reservation.type).includes(term);
    });
  }
}

这是我的模板：

<my-nav-bar></my-nav-bar>
<div class='row'>
  <div class="col s12 m10">
    <div class="card hoverable">
      <form>
        <div class="form-group form-inline">
            Full text search: <input class="form-control ml-2" type="text" [formControl]="filter"/>
        </div>
      </form>
      <table cellpadding="1" cellspacing="1" class="table table-hover" id="myTable">
          <thead>
            <tr>
                <th>Site</th>
                <th>Type</th>
                <th>Début</th>
                <th>Fin</th>
                <th>Date de reservation</th>
                <th>Numéro salle</th>
                <th>Action</th>
            </tr>
          </thead>
          <tbody>
              <tr *ngFor="let reservation of reservations$ | async | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize">
                <td>
                  <ngb-highlight [result]="reservation.location" [term]="filter.value"></ngb-highlight>
                  <!--{{  }}-->
                </td>
                <ng-container *ngIf='reservation.type == "conf_room"'>
                <td><!--{{'salle de réunion'}}-->
                  <ngb-highlight [result]="salleDeRunion" [term]="filter.value"></ngb-highlight>
                </td>
                </ng-container>
                <ng-container *ngIf='reservation.type == "call_room"'>
                <td><!--{{"salle d'appel"}}-->
                  <ngb-highlight [result]="salleDAppel" [term]="filter.value"></ngb-highlight>
                </td>
                </ng-container>
                <ng-container *ngIf='reservation.type == "laptop"'>
                    <td>{{'ordinateur portable'}}</td>
                </ng-container>
                <td>{{reservation.start}}</td>
                <td>{{reservation.end}}</td>
                <td>{{reservation.date_res}}</td>
                <td>{{reservation.number}}</td>
                <td><button class="btn btn-outline-primary" (click)="deletReservation(reservation.id)"><i class="material-icons icon">delete</i></button></td>
              </tr>
          </tbody>
        </table>
    </div>
  </div>
</div>
<div class="col s12 m10 offset-m1 center">
    <ngb-pagination [collectionSize]="reservations.length" [pageSize]="pageSize" [(page)]="page" aria-label="Default pagination"></ngb-pagination>
</div>

当我在搜索栏中键入某些内容并且与我的表格中的某项匹配时，该内容会突出显示，但列表未过滤。

有人可以帮我吗。谢谢。