Я новичок в Angular, у меня есть таблица данных, которая отображает данные сотрудников, все работает нормально, за исключением того, что всякий раз, когда я ищу в поле имени, данные не отображаются во время поиска, пока я не нажму клавишу пробела, а затем клавишу backspace, в противном случае таблица просто показывает что данные не отображаются, хотя в консоли он показывает, что данные существуют из введенного мною ввода. Поэтому, чтобы отобразить данные поиска, я должен ввести имя, затем пробел, затем пробел, надеюсь, я ясно дал понять, Ваша помощь очень ценится.

employees.component.html

{amp}lt;table id="myTable" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover stripe"{amp}gt; {amp}lt;thead{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;th class="border-left" translate{amp}gt;employees.name{amp}lt;i class="fas fa- search" 10px 0px 10px;" (click)="filterByName()"{amp}gt;{amp}lt;/i{amp}gt;{amp}lt;input type="text" [formControl]="employeeFilterCtrl" id="myId" style="z-index: 9999; display: none;"/{amp}gt;{amp}lt;/th{amp}gt; {amp}lt;th class="border-center" translate{amp}gt;employees.status{amp}lt;/th{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/thead{amp}gt; {amp}lt;tbody{amp}gt; {amp}lt;ng-container *ngFor="let item of filteredEmployees | async"{amp}gt; {amp}lt;tr *ngFor="let employeeStatus of item.employeeJobStatuses"{amp}gt; {amp}lt;td{amp}gt;{{ item.firstName_FL   ' '   item.secondName_FL   ' '   item.lastName_FL   ' '   item.familyName_FL }}{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{{ employeeStatus.status | translate }}{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/ng-container{amp}gt; {amp}lt;/tbody{amp}gt; 

employees.component.ts

 filterByName(){ document.querySelector('#myId').setAttribute('style', 'display: unset); } search() { if (!this.employees) { return } let search = this.employeeFilterCtrl.value; if (!search) { this.filteredEmployees.next(this.employees.slice()); console.log(this.filteredEmployees.next(this.employees.slice())) return; } else { search = search.toLowerCase(); } this.filteredEmployees.next( this.employees.filter(employee ={amp}gt; employee.firstName_FL.toLowerCase().indexOf(search) {amp}gt; -1) ); console.log(this.employees.filter(department ={amp}gt; department.firstName_FL.toLowerCase().indexOf(search) {amp}gt; -1)) } getActiveEmployees(){ this.loading = true; this.restService.GetActiveEmployees().subscribe((res: any) ={amp}gt; { this.employees = res.data.employees; console.log(this.employees) const maw = JSON.stringify(this.employees) this.jsonObj = JSON.parse(maw); this.Employee.setValue(this.employees[5]); this.filteredEmployees.next(this.employees.slice()); this.employeeFilterCtrl.valueChanges .pipe(takeUntil(this._onDestroy)) .subscribe(() ={amp}gt; { this.search(); }); if (this.isDtInitialized) { this.dtElement.dtInstance.then((dtInstance: DataTables.Api) ={amp}gt; { dtInstance.destroy(); this.dtTrigger.next(); }); } else { this.isDtInitialized = true this.dtTrigger.next(); } this.loading = false; }) }