I am trying to filter a table list in angular. The list source is an http observable. I'm using a dropdown form control to select the desired value - this in turn calls a filter function in my component - change event. There is 1 issue I'm experiencing that I can't figure out:

1. The observable is filtering (as I can see when logging the observable content to the console), but will not display in the webpage table. I get the unfiltered observable contents returned after each filter drop down selection.

I'm using Angular 13, rxjs 7.4, and boostrap 5.

Here is the code:

Component code

  public worksheetId = new FormControl('');
  public worksheetLogList$!:Observable<worksheetLogItem[]>; //worksheetLogItem
  public worksheetLogListFiltered$!:Observable<worksheetLogItem[]>; //worksheetLogItem

  this.worksheetLogList$ = this.service.getWorksheetUpdateLogList();
  this.worksheetLogListFiltered$ = this.worksheetLogList$; 

public FilterFn(){
    this.worksheetLogListFiltered$ = this.formGroup.get('worksheetId')!.valueChanges.pipe(
      startWith(''),
      debounceTime(400),
      withLatestFrom(this.worksheetLogList$),
      map(([val, myWorksheetLog]) =>
        !val ? myWorksheetLog : myWorksheetLog.filter((x: { worksheetId: number; }) => x.worksheetId === Number(val),
        console.log('test: ' + val)
        )
      )
    );
}

Template code

<form [formGroup]="formGroup">
      <div class="column" style="width: 25%;">&nbsp;</div>
        <div class="column" style="width: 5%;">&nbsp;</div>
      <div class="column" style="width: 30%;">
        <select class="form-control" name="worksheetId" placeholder="Search" formControlName="worksheetId"
            id="searchBoxFilter2" (change)="FilterFn()">
            <option placeholder="Choose..." *ngFor="let worksheet of worksheetList$|async" [value]="worksheet.id">
              {{worksheet.worksheetName}}</option>
          </select>
      </div>
</form>

<tbody>
    <ng-container *ngIf="worksheetLogListFiltered$ | async">
    <tr *ngFor="let item of worksheetLogListFiltered$|async">
      <td hidden>{{item.worksheetId}}</td>
      <td width="10px">
        {{worksheetMap.get(item.worksheetId)}}
      </td>
      <td>{{item.changeLog}}</td>
      <td style="text-align: center;">{{item.vendorTicketNumber}}</td>
      <td style="text-align: center;">{{item.changeRequestNumber}}</td>
      <td style="text-align: center;">{{testerMap.get(item.testerId)}}</td>
      <td style="text-align: center;">{{item.changeDate | date:'dd-MMM-yyyy'}}</td>
      <td style="text-align: center;">{{approverMap.get(item.approverId)}}</td>
      <td style="text-align: center;">{{item.releaseDate | date:'dd-MMM-yyyy'}}</td>
      <!-- h:mm aaaa -->
      <td>{{item.notes}}</td>
      <td>
    </tr>
  </ng-container>
  </tbody>
           

The worksheetLogListFiltered$ observable is filtered to the selected item in the filter dropdown, but does not display in the html table. The unfiltered observable displays fine, but when I select an item in the drop down the table displays the unfiltered list.

I have searched for help on-line, watched many videos on this subject, and tried many suggestions with no success. Please help. Thank you for your time and assistance in advance.

Thanks for your time and help in advance.