Question

我有一个设置了分页的帖子列表。该列表上方是一个搜索字段，您可以在其中填写单词。在帖子列表中，将通过Angular Pipe搜索标题和内容。搜索工作正常，但分页仍在未搜索列表上进行。搜索结果在另一页上，用户无法直接看到。

我试图重设分页，但未成功

搜索视图的代码

<form [formGroup]="formGroup" (ngSubmit)="onSearchCustomer()">
  <mat-form-field [ngStyle]="{ width: '100%' }">
    <input
      matInput
      formControlName="searchField"
      tabindex="1"
      autocomplete="off"
      placeholder="Zoek melding"
    />
  </mat-form-field>
</form>
<mat-accordion multi="true" *ngIf="posts.length > 0">
  <mat-expansion-panel *ngFor="let post of posts | searchPostsPipe: searchText">
    <mat-expansion-panel-header>
      {{ post.title }}
    </mat-expansion-panel-header>
    <p>{{ post.content }}</p>
    <mat-action-row>
      <a
        mat-button
        color="primary"
        [routerLink]="['/edit/', post.id]"
        routerLinkActive="router-link-active"
        >EDIT</a
      >
      <button mat-button color="warn" (click)="onDeletePost(post.id)">DELETE</button>
    </mat-action-row>
  </mat-expansion-panel>
</mat-accordion>
<mat-paginator
  *ngIf="posts.length > 0"
  [length]="totalPost"
  [pageSize]="postPerPage"
  [pageSizeOptions]="pageSizeOptions"
  (page)="onChangedPage($event)"
></mat-paginator>
<p class="info-text mat-body-1" *ngIf="posts.length <= 0">No posts to render yet!</p>

角度TS文件：

import { FormGroup, FormControl } from '@angular/forms';
import { PostService } from './../services/post.service';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { PageEvent } from '@angular/material';

@Component({
  selector: 'app-post-list',
  templateUrl: './post-list.component.html',
  styleUrls: ['./post-list.component.css']
})
export class PostListComponent implements OnInit, OnDestroy {
  // posts: IPost[] = [
  //   { title: 'First post', content: 'First post content' },
  //   { title: 'Second post', content: 'Second post content' },
  //   { title: 'Third post', content: 'Third post content' },
  //   { title: 'Fourth post', content: 'Fourth post content' }
  // ];
  posts: IPost[] = [];
  postsSub$ = new Subscription();
  totalPost = 0;
  postPerPage = 3;
  currentPage = 1;
  pageSizeOptions = [1, 2, 3, 5, 10];
  isLoading = false;
  formGroup: FormGroup;
  searchText: string;

  constructor(private postService: PostService) {}

  ngOnInit() {
    this.isLoading = true;
    this.postService.getPosts(this.postPerPage, this.currentPage);
    this.postsSub$ = this.postService
      .getPostUpdateListener()
      .subscribe((postData: { posts: IPost[]; postCount: number }) => {
        this.isLoading = false;
        this.totalPost = postData.postCount;
        this.posts = postData.posts;
      });
    this.initForm();
  }

  ngOnDestroy() {
    this.postsSub$.unsubscribe();
  }

  initForm() {
    this.formGroup = new FormGroup({
      searchField: new FormControl()
    });
  }

  onSearchCustomer() {
    this.searchText = this.formGroup.get('searchField').value;
    this.resetPagination();
  }

  resetPagination() {
    console.log('#########-length', this.posts.length);
    console.log('#########-ppp', this.postPerPage);
    this.postPerPage = this.posts.length;
  }

  onDeletePost(postId: string) {
    this.isLoading = true;
    this.postService.deletePost(postId).subscribe(() => {
      this.postService.getPosts(this.postPerPage, this.currentPage);
    });
  }

  onChangedPage(pageData: PageEvent) {
    this.isLoading = true;
    this.currentPage = pageData.pageIndex + 1; // index start with 0 but backend starts with 1, 2, etc
    this.postPerPage = pageData.pageSize;
    this.postService.getPosts(this.postPerPage, this.currentPage);
  }
}

我希望或我想完成的事情是，当搜索成功并找到帖子时，该帖子会列在列表视图中。分页应位于返回的已找到帖子列表中。

搜索结果后如何解决分页

0 个答案: