Tengo una matriz de la siguiente manera:
[ { "id":1, "active":1, "name":"paris" }, { "id":2, "active":0, "name":"london" }, { "id":3, "active":1, "name":"Australia" }, { "id":4, "active":0, "name":"india" } ]Tengo un botón de selección de la siguiente manera:
codigo-
<h5>Multiple Selection</h5> <p-selectButton [options]="paymentOptions" [(ngModel)]="value2" multiple="multiple" optionLabel="name" optionValue="value" ></p-selectButton>componente -
this.paymentOptions = [ { name: 'Option 1', value: 1 }, { name: 'Option 2', value: 2 } ]; Quiero filtrar la matriz de dichos datos, cuando se hace clic en 'Option 1' , entonces todos los elementos con 'active':1 deben estar presentes en la matriz. Si el usuario anula la selección 'option 1' , la matriz debe tener todos los elementos. Si se hace clic 'Option 2' , la matriz debe tener solo elementos con 'active':0 , si el usuario anula la selección 'Option 2' , la matriz debe tener todos los elementos. ¿Cómo puedo hacer eso?
Solo necesita pasar su selección al componente a través de ngModelChange y usarlo para ejecutar un filtro en su matriz para obtener el resultado deseado.
app.component.html (se agregó un código adicional para mostrar los valores coincidentes):
<h5>Multiple Selection</h5> <p-selectButton [options]="paymentOptions" [(ngModel)]="value2" (ngModelChange)="filter($event)" multiple="multiple" optionLabel="name" optionValue="value" ></p-selectButton> <div>Selected option: {{value2}}</div> <div *ngFor="let item of filteredItems">{{ item.name}}</div>aplicación.componente.ts:
filter(data) { if (data.length === 0) { this.filteredItems = this.list; return; } this.filteredItems = []; this.filteredItems = this.list.filter( (item) => data.findIndex((x) => (x === item.active && x !== 2) || (item.active === 0 && x === 2)) > -1 ); }