Tengo una lista desplegable con un filtro para valores IN y OUT . Aquí todo funciona.
<select class="form-select" style="max-width: 100px" [ngModel]="selectedBrand" (ngModelChange)="onChangeType($event)"> <option [value]="'IN'">IN</option> <option [value]="'OUT'">OUT</option> </select>TS
public selectedBrand: any; public onChangeType(type: any) { this.selectedBrand = type; console.log(this.selectedBrand); this.filteredCustomer = this.customerTransferts.filter( (item) => item.type === this.selectedBrand ); console.log(this.filteredCustomer); } Ahora me gustaría agregar SELECT ALL para recuperar los elementos de IN o OUT .
¿Qué me falta en mi código, por favor?
Gracias por tu ayuda.
Puede tener una función para eliminar el filtro de esta manera:
resetFilter() { this.selectedBrand = ''; this.filteredCustomer = this.customerTransferts }Puede llamar a esto con un clic de botón o lo que quiera.
O puede poner otra opción en su menú desplegable y buscarla en el método onChangeType .
<select class="form-select" style="max-width: 100px" [ngModel]="selectedBrand" (ngModelChange)="onChangeType($event)"> <option [value]="'ALL'">ALL</option> <option [value]="'IN'">IN</option> <option [value]="'OUT'">OUT</option> </select> public onChangeType(type: any) { if (type === 'ALL') { this.filteredCustomer = this.customerTransferts; return; } this.selectedBrand = type; console.log(this.selectedBrand); this.filteredCustomer = this.customerTransferts.filter( (item) => item.type === this.selectedBrand ); console.log(this.filteredCustomer); } También debe cambiar su ngModel a enlace bidireccional [(ngModel)]
<select class="form-select" style="max-width: 100px" [(ngModel)]="selectedBrand" (ngModelChange)="onChangeType($event)"> Luego, se sincronizará automáticamente con la propiedad selectedBrand , en ambos sentidos.
Entonces puede eliminar this.selectedBrand = type de onChangeType() .
public onChangeType(type: any) { if (type === 'ALL') { this.filteredCustomer = this.customerTransferts; return; } this.filteredCustomer = this.customerTransferts.filter( (item) => item.type === type ); }