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!

Lou
  • 3
  • 5

1 Answers1

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'
Lobos
  • 14,463
  • 3
  • 9
  • 28
  • Solucioné la primera parte, ahora tengo el error del "startsWith", cómo puedo hacerlo? – Lou Aug 09 '21 at 13:56
  • Es igual. Tienes que usar una de las propiedades del objeto en `acta[i] ` – Lobos Aug 09 '21 at 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 Aug 09 '21 at 14:45
  • https://es.stackoverflow.com/questions/475849/no-tengo-resultados-en-la-b%c3%basqueda-0-b%c3%basqueda-encontrada ahí te dejo el link donde deje la pregunta! gracias x la ayuda!! – Lou Aug 09 '21 at 14:56