如何在Angular12中限制搜索结果

Question

我正在尝试限制表中显示的结果。我试着把ngrepeat和limitTo放在一起，但是不起作用。

下面是我的代码：

busqueda.component.ts

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

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


export class BusquedaComponent implements OnInit {


  filterTerm: string;

  items = [];

  actas = [{
      "nombre": "Lede, Lourdes del Mar",
      "DNI": "40.775.265",
      "FechaNacimiento": "17/02/1998",
      "LugarNacimiento": "La Rioja, Capital",
      "ActaNacimiento": "VER"
    }
    
  ];

  //paginación
  pageOfItems: Array<any>;


  constructor() { }

  ngOnInit(): void {
    console.log(123);

    this.items = Array(150).fill(0).map((x, i) => ({ id: (i + 1)}));
  }

  onChangePage(pageOfItems: Array<any>) {
    // update current page of items
    this.pageOfItems = pageOfItems;
}

}

busqueda.component.html

<div class="container">
<h1 class="titulo text-center">Buscar un acta</h1>
<div class="busqueda">
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Buscar..." [(ngModel)]="filterTerm">
        <i class="fas fa-search"></i>
    </div>
    <p class="txt text-center">La búsqueda se puede realizar por nombre, apellido, DNI, fecha de nacimiento o lugar de nacimiento.</p>
    <table class="table table-hover">
        <thead>
            <tr class="tabla">
                <th>Apellido y Nombre</th>
                <th>DNI</th>
                <th>Fecha de Nacimiento</th>
                <th>Lugar de Nacimiento</th>
                <th>Acta de Nacimiento</th>
            </tr>
        </thead>
        <tbody *ngFor="let acta of actas | filter:filterTerm">
            <tr class="tabla">
                <td class="txt-left">{{acta.nombre}}</td>
                <td>{{acta.DNI}}</td>
                <td>{{acta.FechaNacimiento}}</td>
                <td>{{acta.LugarNacimiento}}</td>
                <td>{{acta.ActaNacimiento}}</td>
            </tr>
        </tbody>
    </table>
</div>

我不知道如何继续，任何帮助都会对我有很大帮助。搜索框工作正常，它显示了列表，也许我可以限制10到5个结果，因为当程序运行时，在数据库中搜索会有很大的工作量，这就是为什么我在这里。

Answer 1

你可以实现的最好的事情是限制来自后端的结果，这将使代码在fe和轻量级中变得干净。

另一种解决方法是使用index限制循环，直到您想要的限制。