Angular Таблица материалов: поиск значения на основе двух столбцов базы данных, но одного столбца пользовательского интерфейса

Question

Я пытаюсь добавить фильтр в свой столбец имени, который состоит из ключей имя + фамилия . Фильтр работает нормально, пока я не буду искать либо по имени, либо по фамилии. Но когда я ищу с полным именем нет - результат не появляется.

Например, если столбец имеет значение - «Charl ie Opas»

поиск charl ie дает результаты, поиск opas дает результаты, но поиск charl ie opas ничего не дает. ниже мой код.

component.ts

  displayedColumns: string[] = [
    'firstName',
    'org.name',
    'role.name',
    'email',
    'status.name',
    'action',
  ];

public doFilter = (value: string) => {
    this.dataSource.filter = value.trim().toLocaleLowerCase();
  }

component. html

 <input matInput type="text" (keyup)="doFilter($event.target.value)"  name="username"/>

 <ng-container matColumnDef="firstName">
          <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header>
            User Name
          </th>
          <td mat-cell *matCellDef="let element">{{ element.firstName +' '+ element.lastName}}</td>
        </ng-container>

Любая помощь приветствуется.