Angular - Search vector data at Storage location and populate table with data

Question

How do I search for the data stored in the Storage location and populate the table with the result obtained in the search

For example: I search by year or by manufacturer or by model and the table and populated with the result of this search.

Form

<form>

<table>
    <tr>
        <td>
            <label>Informe o modelo a ser adicionado:</label>
            <input type="text" class="" name="modelo"
            [(ngModel)]="modelo" required />
        </td>
        <td>
            <label>Informe o ano a ser adicionado:</label>
            <input type="text" class="" name="ano"
            [(ngModel)]="ano" required />
        </td>
        <td>
            <label>Informe o fabricante a ser adicionado:</label>
            <input type="text" class="" name="fabricante"
            [(ngModel)]="fabricante" required />
        </td>
        <td>
            <input type="submit" value="Adicionar" class=""
             (click)="adicionar()" />
        </td>
    </tr>
</table>

  </form>

  <form>
    <table>
        <tr>
            <td>
                <label>Modelo:</label>
                <input type="text" class="" name="modelo"
                [(ngModel)]="modeloBusca"/>
            </td>
        </tr>
        <tr>
            <td>
                <label>Ano:</label>
                <input type="text" class="" name="anoBusca"
                [(ngModel)]="anoBusca"/>
            </td>
        </tr>
        <tr>
            <td>
                <label>Fabricante:</label>
                <input type="text" class="" name="fabricanteBusca"
                [(ngModel)]="fabricanteBusca"/>
            </td>
        </tr>
        <tr>
            <td>
                <input type="submit" value="Pesquisar" class=""
             (click)="pesquisar()" />
            </td>
        </tr>
    </table>

  </form>

  <table>
    <thead>
        <tr>
            <td>Modelo</td>
            <td>Ano</td>
            <td>Fabricante</td>
            <td>Ação</td>
        </tr>
    </thead>
    
    <tbody>
        <tr *ngFor="let carro of carros; let i= index;">
            <td>
                <input type="text" [(ngModel)]="carro.modelo">
            </td>
            <td>
                <input type="text" [(ngModel)]="carro.ano">
            </td>
            <td>
                <input type="text" [(ngModel)]="carro.fabricante">
            </td>
            <td>
                <div>
                    <button (click)="remover(i)">Excluir</button>
                </div>
            </td>
        </tr>
    </tbody>
    </table>

Typescript

import { Component } from '@angular/core';
import { Carro} from '../classes/Carro';

@Component({
selector: 'carro-data',
templateUrl: './carro.component.html',
})
export class CarroComponent {
  modelo: string;
  ano: string;
  fabricante: string;
  
  modeloBusca: string;
  anoBusca: string;
  fabricanteBusca: string;

  carros: Carro[] = [];

    storedNames: any;
    
    constructor(){}

    adicionar() {
     this.carros.push({
            marca: this.modelo,
            ano: this.ano,
            fabricante: this.fabricante
        })

        //Adicionando no localstorage
        localStorage.setItem("carros", JSON.stringify(this.carros));
    }

    pesquisar() {
        localStorage.setItem("carros", JSON.stringify(this.carros));
    }
  
    remover(index) {
        this.carros.splice(index, 1);
    }

}

Answer 1

I made a change only that when I search for invalid data that is not saved in the Path location the search is done normally. You shouldn’t let me search in case any data is wrong.

 pesquisar(marca: string, ano: string, modelo: string) {
        this.storedNames = JSON.parse(localStorage.getItem("carros"));
        this.enderecos = this.storedNames ? this.filtrar(marca, ano, modelo) : this.enderecos;
  }

  filtrar(marca: string, ano: string, modelo: string): Carro[] {
    return this.enderecos.filter((carro: Carro) => carro.marca.indexOf(marca) !== -1 ||
    carro.ano.indexOf(ano) !== -1 || carro.modelo.indexOf(modelo) !== -1);
  }