html - 如何限制Angular12中的搜索结果

问题描述

我试图限制表中显示的结果。我尝试将 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 个结果，因为程序运行时在数据库中搜索会很多，这就是我在这里的原因。

标签： htmlangulartypescript

html - 如何限制Angular12中的搜索结果

问题描述

解决方案

推荐阅读