tengo una entrada con ngfor, me aparece varias opciones
<article *ngIf="layout=='esalpet'" class="filter-group"> <header class="card-header"> <a href="#" data-toggle="collapse" data-target="#collapse_4" aria-expanded="true" class=""> <i class="icon-control fa fa-chevron-down"></i> <h6 class="title">Marcas</h6> </a> </header> <div class="filter-content collapse show" id="collapse_4"> <div *ngFor="let categ of filtro" class="card-body"> <label class="custom-control custom-radio"> <input (change)="filterMarcas($event)" class="custom-control-input" type="radio" id="5" name="marca" value="{{categ.marcaJ.marca}}" id="flexCheckChecked" /> <div class="custom-control-label" id="5">{{categ.marcaJ.marca}}</div> </label> </div> <!-- card-body.// --> </div>al seleccionar alguna de las entradas, me gustaría que solo apareciera la entrada seleccionada por el usuario
sigue mi método que traté de hacer
filterMarcas(event){ this.slicedItems = this.slicedItems.filter(item => item.marcaJ?.marca === event.target.value ) console.log(this.slicedItems) this.filtro = this.slicedItems.filter((record, index) => this.filtro.findIndex(check => check.marcaJ?.marca === record.marcaJ?.marca) === index); this.peso = this.peso.filter((record, index) => this.peso.findIndex(check => check.peso === record.peso) === index); }¿Hay un método mejor que este?
this.filtro = this.slicedItems.filter((record, index) => this.filtro.findIndex(check => check.marcaJ?.marca === record.marcaJ?.marca) === index);Puede alguien ayudarme con esto ?
Crear un nuevo PipeTransform
import { Pipe, PipeTransform } from '@angular/core'; interface Marca { marcaJ: { marca: string } } @Pipe({ name: 'marcaFilter' }) export class MarcaFilterPipe implements PipeTransform { transform(marcas: Marca[], name: string): Marca[] { if (!name) { return marcas; } return marcas.filter(marca => marca.marcaJ?.marca === name); } }Declararlo dentro de su módulo.
@NgModule({ ..., declarations: [ ... MarcaFilterPipe, ], }) export class AppModule { } Y agregue la tubería a su *ngFor
<div *ngFor="let categ of filtro | marcaFilter: categ.marcaJ.marca"> ... </div>