estoy teniendo problemas con la busqueda en una tabla de angular material con el elemento filter adjunto codigo e imagenes
<div class="container p-3">
<div class="row px-3">
<div class="col-md-12" *ngIf="payments.length < 1">
<!--loader-->
<div class="text-center">
<img src="assets/gift/loader.gif" alt="loader">
</div>
<p class="text-center">
Cargando Data
</p>
</div>
<!--Table-->
<div class="text-danger" >agregar usuario con boton colocar aki</div>
<div class="col-md-12 mat-elevation-z2 p-3 mb-5 bg-body rounded" *ngIf="payments.length > 0">
<div class="pt-5 ">
<p class="text-center fs-2 text-decoration-underline">
Lista de Facturas Actuales:
</p>
</div>
<div class="">
<mat-form-field appearance="standard">
<mat-label>Buscar</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="Ej. jugo" #input>
</mat-form-field>
</div>
<div class="border mat-elevation-z2">
<table mat-table [dataSource]="dataSource" matSort>
<!-- date Column -->
<ng-container matColumnDef="date">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Fecha: </th>
<td mat-cell *matCellDef="let payment"> {{payment.createdAt | date:'M/d/yy, h:mm a'}} </td>
</ng-container>
<!-- name Column -->
<ng-container matColumnDef="name" class="d-flex">
<th mat-header-cell *matHeaderCellDef> Cliente: </th>
<td mat-cell *matCellDef="let payment"> {{payment.client.name}} </td>
</ng-container>
<!-- client_ci Column -->
<ng-container matColumnDef="client_ci">
<th mat-header-cell *matHeaderCellDef> Ci: </th>
<td mat-cell *matCellDef="let payment"> {{payment.client.ci}} </td>
</ng-container>
<!-- products Column -->
<ng-container matColumnDef="products">
<th mat-header-cell *matHeaderCellDef> Productos: </th>
<td mat-cell *matCellDef="let payment">
<div *ngFor="let product of payment.Product_Payments">
{{product.paidProduct.name + ':' + ' ' + product.product_qty + ' ' + 'uds'}}
</div>
</td>
</ng-container>
<!-- sub_total Column -->
<ng-container matColumnDef="sub_total">
<th mat-header-cell *matHeaderCellDef> Sub total: </th>
<td mat-cell *matCellDef="let payment">{{payment.sub_total}} </td>
</ng-container>
<!-- total Column-->
<ng-container matColumnDef="total">
<th mat-header-cell *matHeaderCellDef> Total: </th>
<td mat-cell *matCellDef="let payment">{{payment.total}} </td>
</ng-container>
<!-- status Column-->
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef> Estado: </th>
<td mat-cell *matCellDef="let payment">
<span *ngIf="payment.status == false" class="text-danger">
deuda
</span>
<span *ngIf="payment.status == true" class="text-success">
pago
</span>
</td>
</ng-container>
<!-- CONFIRM Column-->
<ng-container matColumnDef="confirm">
<th mat-header-cell *matHeaderCellDef> - </th>
<td mat-cell *matCellDef="let payment">
<a *ngIf="payment.status == false" matTooltip="Confirmar Pago" matTooltipClass = "tooltipPer">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-lg" viewBox="0 0 16 16">
<path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"/>
</svg>
</a>
<span *ngIf="payment.status == true" class="text-success">
-
</span>
</td>
</ng-container>
<!-- details Column-->
<ng-container matColumnDef="details">
<th mat-header-cell *matHeaderCellDef> - </th>
<td mat-cell *matCellDef="let payment">
<a [routerLink]="['/admin/payments/details',payment.id]" matTooltip="Detalles de la factura" matTooltipClass = "tooltipPer">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
</a>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<!-- Row shown when there is no matching data. -->
<tr class="mat-row" *matNoDataRow>
<td class="mat-cell" colspan="4">No encontrado "{{input.value}}"</td>
</tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 50]" aria-label="Select page of users"></mat-paginator>
</div>
</div>
</div>
</div>
y este es mi componente ts
import { Component, ViewChild, AfterViewInit, OnDestroy } from '@angular/core';
import { Subscription} from 'rxjs';
//MATERIAL
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
//SERVICES
import { InvoiceService } from 'src/app/services/invoice.service';
import { Router } from '@angular/router';
//models
import { Payment } from 'src/app/models/payment';
@Component({
selector: 'app-paymentlist',
templateUrl: './paymentlist.component.html',
styleUrls: ['./paymentlist.component.css']
})
export class PaymentlistComponent implements AfterViewInit,OnDestroy {
public subscriptions:Subscription [] = [];
public payments:Payment [] = [];
//material
public displayedColumns: string[] = ['date','name', 'client_ci', 'products', 'sub_total','total','status','confirm','details'];
public dataSource!: MatTableDataSource<Payment>;
@ViewChild(MatPaginator) paginator!: MatPaginator;
@ViewChild(MatSort) sort!: MatSort;
constructor(
private _paymentService:InvoiceService,
private _route:Router,
){
}
ngAfterViewInit(): void {
this.getPayments();
}
ngOnDestroy():void{
this.subscriptions.forEach(sub=>{ sub.unsubscribe() });
}
getPayments(){
this.subscriptions.push(this._paymentService.allInvoices().subscribe(
response =>{
if(response){
this.payments = response.payments;
this.dataSource = new MatTableDataSource(this.payments);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
console.log(this.dataSource.sort,this.sort)
}
},
err =>{
console.error(err);
}
));
}
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
}
}
}
solo me da los resultados cuando filtro por los valores numeros pero los nombres no los encuentra por ejemplo
este es el modelo que estoy usando
import { Customer } from "./customer";
import { ProductPayment } from "./productPayment";
export class Payment{
constructor(
public id:number,
public payment_type:string,
public iva:number,
public sub_total:number,
public total:number,
public status:boolean,
public createdAt:any,
public updatedAt:any,
public customer_id:number,
public client:Customer,
public product_payments: ProductPayment[]
){}
}