Angular search : filter pipe show only data from current showed page

Question

I'm getting data from node sever and display it with angular in component, I'm using paginate of angular and want to make a search area tat filter what user want, the filter search only in the current page and not in the whole data !

here is the html code :

  <div class="col-4 offset-2 select form-group">
      <input class="form-control" type="text" name="search" [(ngModel)]="searchText"  placeholder="&#61442;  chercher un sondage "> 
    </div>

  <div class="widget-body">
    <div class="ui link cards row divCards">
      <div class="card" *ngFor="let sondage of filteredSurveys | paginate:{  itemsPerPage:10, currentPage: p } | filter:searchText;  let i=index" [attr.data-tooltip]="sondage.status | uppercase"  > 

        <div class="content">
          <div class="header"> {{sondage.title}} 
          <div class="meta right floated">
            <i *ngIf="sondage.status=='waiting'" class="hourglass half icon" style=" color: rgb(196, 61, 61);"></i>
            <i *ngIf="sondage.status=='live'" class="play icon pulsate" style="color: rgb(7, 91, 216);"></i>
            <i *ngIf="sondage.status=='paused'" class="pause icon  pulsate"  style="color: orange;"></i>
            <i *ngIf="sondage.status=='done'" class="check circle icon noAfter"  style="color: green;"></i>
            <i *ngIf="sondage.status=='closed'" class="window close icon" style="color: rgb(4, 41, 27);"></i>
          </div></div>
            <div class="image ">
            <img  src="https://via.placeholder.com/{{ 150+(10*i) }}" alt="">  
            </div>
          <div class="meta divIcon">
            <a [routerLink]="['/sondage/single/' + sondage._id]"><i class="la la-pie-chart edit settings"></i></a>
            <a href="#" data-toggle="modal" [attr.data-target]="'#modal-link' + i"><i
                class="la la-link edit settings"></i></a>

                <a data-toggle="tooltip"  title="Metre en direct" *ngIf="sondage.status != 'live'"
                (click)=startSurvey(sondage._id)><i id="playPause" class="la la-play delete settings" ></i></a>

              <a data-toggle="tooltip" title="Pauser sondage" *ngIf="sondage.status == 'live'"
                (click)="pauseSurvey(sondage._id)"><i id="playPause" class="la la-pause delete settings"></i></a>
              <a data-toggle="tooltip" title="Supprimer sondage" href="#" data-toggle="modal"
                [attr.data-target]="'#supp' + i"><i class="la la-trash delete settings"></i></a>
          </div>

          <div class="description">
             {{sondage.object}}
          </div>
        </div>
        <div class="extra content">
          <span class="right floated">
            <i class="calendar times icon"></i>
            {{sondage.endDate |date }}
          </span>
          <span>
            <i class="calendar plus icon"></i>
            {{sondage.startDate |date }}
          </span>
        </div>
        <div [attr.id]="'modal-link' + i" class="modal fade">
          <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title">Sondage : {{ sondage.title }}</h4>
                <button type="button" class="close" data-dismiss="modal">
                  <span aria-hidden="true">×</span>
                  <span class="sr-only">close</span>
                </button>
              </div>
              <div class="modal-body">
                <h4 class="text-gradient-02">Copier le lien:</h4>
                <div class="form-group row d-flex align-items-center">
                  <div class="col">
                    <div class="input-group">

                      <input type="text" class="form-control"
                        [attr.value]="'https://www.baladiaty.tn/#/sondages/single/' + sondage._id">
                      <span class="input-group-addon addon-primary rounded-right">
                        <i class="la la-link"></i>
                      </span>
                    </div>
                  </div>
                </div>
                <p-card>
                  <p-header>
                      Header content here
                  </p-header>
                  Body Content
                  <p-footer>
                      Footer content here
                  </p-footer>
              </p-card>   </div>
              <div class="modal-footer">
                <button type="submit" class="btn btn-primary" data-dismiss="modal">Ok</button>
              </div>
            </div>
          </div>
        </div>
        <div [attr.id]="'supp' + i" class="modal fade">
          <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title">Supprimer un sondage</h4>
                <button type="button" class="close" data-dismiss="modal">
                  <span aria-hidden="true">×</span>
                  <span class="sr-only">close</span>
                </button>
              </div>
              <div class="modal-body">
                <h4 class="text-gradient-02">Êtes-vous sûr de vouloir supprimer ce sondage?</h4>
              </div>
              <div class="modal-footer">
                <button class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                <button type="submit" (click)="deleteSurvey(sondage._id)" class="btn btn-primary"
                  data-dismiss="modal">Confirmer</button>
              </div>
            </div>
          </div>
        </div>

      </div>
      <div class="col-12">

        <pagination-controls  style="text-align: center;" class="my-pagination" (pageChange)="p = $event"></pagination-controls>

      </div>

    </div>
  </div>

---

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-sondages-all',
  templateUrl: './sondages-all.component.html',
  styleUrls: ['./sondages-all.component.css']
})

export class SondagesAllComponent implements OnInit {
  surveys: any[] = [];
  filteredSurveys: any[];
  p: number = 1;
  searchText;
  cols: any[];
  loading: boolean = true;

  constructor(
    private http: HttpClient
  ) { }

  ngOnInit() {
    this.getSurveys();
  }

  getSurveys() {

    this.http.get("/api/surveys").subscribe((surveys: any[]) => {
      this.surveys = surveys;
      this.filteredSurveys = this.surveys;
      this.loading = false;
    })
  }

}

I am missing some thing here so that I can get filter result from all data ( filteredSurveys) ?

Answer 1

Angular Pipes are pure by default. That means, the pipe logic will be triggered only when your "piped" object changes. I can't see anywhere you change your filteredSurveys , only in ngOnInit when you make Http call. What you should do, if you want to achieve pagination, you have to do one of two things. You can change your Pipe to unpure by setting it property in decorator pure=false . Or you can remove pipe and in your array filteredSurveys have already filtered values. And then programatically change p and update this array inside of component.

Answer 2

尝试按如下方式反转过滤器顺序：

   *ngFor="let sondage of filteredSurveys | filter:searchText;  | paginate:{  itemsPerPage:10, currentPage: p }