Tengo una serie de objetos que necesito ocultar según el filtro como se muestra a continuación:
HTML CODE: Filter: <div (click)="filter(1)"> F1 </div> <div (click)="filter(2)"> F2 </div> <div (click)="filter(3)"> F3 </div> <div (click)="filter(4)"> F4 </div> <div *ngFor="let data of datas"> <span *ngIf="data.show"> {{data.name}} </span> </div> ts Code: this.datas = `[{'name':'product one','filter':'1'},{'name':'product two','filter':'2'},{'name':'product three','filter':'3'},{'name':'product three','filter':'3'},{'name':'product','filter':''},{'name':'product','filter':''},{'name':'product one','filter':'1'},{'name':'product'}]` filter(query){ this.datas.forEach(function (element, index) { if (element.filter == query ) { element.show = true; } else { element.show = false; }He intentado el enfoque anterior, no funciona. Esperado como:
Observaciones/Sugerencias :
show . Puede lograrlo fácilmente filtrando la matriz de datas en función del valor pasado en el método filter() .filter() .Demostración de trabajo : https://jsfiddle.net/srvpw2bo/
Los objetos de la matriz no tienen la propiedad show que prueba en la directiva *ngIf
Bastante simple, de verdad.
Te hice una pequeña aplicación de stackblitz. Pero también realmente, realmente necesitas trabajar en tu código. Incluso como descripción de su ayuda, esto es bastante confuso.
No codifiqué sus "Selecciones múltiples" para usted.
https://stackblitz.com/edit/angular-ivy-fbpgdv?file=src/app/app.component.ts