Я получаю данные от узла сервера и отображаю их с angular в компоненте, я использую paginate из angular и хочу создать область поиска в соответствии с желаемым пользователем, фильтр поиска только в текущем страница, а не в целом данные!
вот код html:
<div class="col-4 offset-2 select form-group">
<input class="form-control" type="text" name="search" [(ngModel)]="searchText" placeholder=" 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;
})
}
}
Я что-то упускаю здесь, чтобы я мог получить результат фильтрации по всем данным (FilterSurveys)?