0

Me saltan estos estos errores: This condition will always return 'false' since the types '{ nombre: string; DNI: string; FechaNacimiento: string; LugarNacimiento: string; ActaNacimiento: string; }' and 'string' have no overlap.

Property 'startsWith' does not exist on type '{ nombre: string; DNI: string; FechaNacimiento: string; LugarNacimiento: string; ActaNacimiento: string; }'.

Mi código es el siguiente:

busqueda.component.html

<div class="container">
<h1 class="titulo text-center">Buscar un acta</h1>
<div class="busqueda">
    <div class="form-group">
        <input (keyup)="onSubmit($event)" [(ngModel)]="searchValue" type="text" id="searchKey" class="form-control" placeholder="Buscar..." />
        <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>
    <div *ngIf="condition; then block1; else block2">
    </div>
    <ng-template #block1>
        <i class="fa fa-spinner fa-spin" aria-hidden="true">
          </i> Buscando resultados para
        <strong>{{prevText}}</strong>
    </ng-template>
    <ng-template #block2>
        <h6>{{res_cnt}} Búsqueda encontrada
            <span *ngFor="let user of actas">
              <strong>{{lang}}, </strong></span>
        </h6>
    </ng-template>
    <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>
            <tr class="tabla" *ngFor="let user of actas">
                <td class="txt-left">{{user.nombre}}</td>
                <td>{{user.DNI}}</td>
                <td>{{user.FechaNacimiento}}</td>
                <td>{{user.LugarNacimiento}}</td>
                <td>{{user.ActaNacimiento}}</td>
            </tr>
        </tbody>
    </table>
</div>

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 {

  searchValue: string = null;
  items = [];
  condition: boolean = null;
  prevText: string = '';
  actas = [{
    "nombre": "Lede, Lourdes del Mar",
    "DNI": "40.775.265",
    "FechaNacimiento": "17/02/1998",
    "LugarNacimiento": "La Rioja, Capital",
    "ActaNacimiento": "VER"
  },
  {
    "nombre": "Lede, Milva Ernestina",
    "DNI": "44.123.456",
    "FechaNacimiento": "24/04/2004",
    "LugarNacimiento": "La Rioja, Capital",
    "ActaNacimiento": "VER"
  },
  {
    "nombre": "Lede, Guadalupe Esmeralda",
    "DNI": "01.234.567",
    "FechaNacimiento": "13/11/2005",
    "LugarNacimiento": "La Rioja, Capital",
    "ActaNacimiento": "VER"
  },
  {
    "nombre": "Lede, Ángel Gustavo",
    "DNI": "23.670.990",
    "FechaNacimiento": "07/01/1974",
    "LugarNacimiento": "Buenos Aires, Capital Federal",
    "ActaNacimiento": "VER"
  },
  {
    "nombre": "Mansilla Kukulis, Susana Estela",
    "DNI": "23.963.589",
    "FechaNacimiento": "24/06/1974",
    "LugarNacimiento": "La Rioja, Capital",
    "ActaNacimiento": "VER"
  },
  {
    "nombre": "Lede, Lourdes del Mar",
    "DNI": "40.775.265",
    "FechaNacimiento": "17/02/1998",
    "LugarNacimiento": "La Rioja, Capital",
    "ActaNacimiento": "VER"
  },
  {
    "nombre": "Lede, Milva Ernestina",
    "DNI": "44.123.456",
    "FechaNacimiento": "24/04/2004",
    "LugarNacimiento": "La Rioja, Capital",
    "ActaNacimiento": "VER"
  },
  {
    "nombre": "Lede, Guadalupe Esmeralda",
    "DNI": "01.234.567",
    "FechaNacimiento": "13/11/2005",
    "LugarNacimiento": "La Rioja, Capital",
    "ActaNacimiento": "VER"
  }
  
];
  res_list = [];
  res_cnt: number = 0;
    
  onSubmit($event){
    if($event.keyCode === 13){
      this.condition = true;
      this.prevText = this.searchValue;
      this.res_cnt = 0;
      this.res_list = [];
      setTimeout(() => {
        this.condition = false;
        for(let i=0; i<this.actas.length; i++){
          if(this.actas[i] === this.prevText.toLowerCase()
             || this.actas[i].startsWith(this.prevText)){
            this.res_cnt += 1;
            this.res_list.push(this.actas[i]);
          }
        }
      }, 3000);
      this.searchValue = null;
    }
  }

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

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

  constructor() { }

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

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

Lo que yo necesito es que a partir de algo que escriba un usuario en el cuadro de búsqueda, al dar enter, que busque dentro del array actas, que eso es lo que no estaría funcionando.

Agradezco la ayuda!

1 respuesta 1

0

Los errores se producen porque se están tratando los objectos de tipo Acta como si fueran cadenas.

    if(        // 1. actas[i] es un objeto por eso no puede compararse con una cadena
               this.actas[i] === this.prevText.toLowerCase()
               // 2. actas[i] es un objeto y no tiene el método startsWith()
                 || this.actas[i].startsWith(this.prevText)){
                this.res_cnt += 1;
                this.res_list.push(this.actas[i]);
     }

Lo que se debe hacer es acceder a las propiedades de los objetos, por ejemplo:

actas[i].nombre == 'otra cadena'
4
  • Solucioné la primera parte, ahora tengo el error del "startsWith", cómo puedo hacerlo?
    – Lou
    Commented el 9 ago. 2021 a las 13:56
  • Es igual. Tienes que usar una de las propiedades del objeto en acta[i]
    – Lobos
    Commented el 9 ago. 2021 a las 14:08
  • no logro q me traiga datos igual, me sale q la busqueda no encontró nada, dejo abierta otra pregunta x si me podes ayudar
    – Lou
    Commented el 9 ago. 2021 a las 14:45
  • es.stackoverflow.com/questions/475849/… ahí te dejo el link donde deje la pregunta! gracias x la ayuda!!
    – Lou
    Commented el 9 ago. 2021 a las 14:56

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.