Toggle does not show data as intended when clicked

I've been trying to display a list of data from the server using a toggle.

During the first load, the data will only be displayed according to the checkbox filter (disabled 'Show All'). This one works.

Here is how data shows after filter

But somehow, when i click the toggle to show all the data existed in the list, it does not working. (p/s: here user cannot filter anything because it only shows all data available.)

Supposedly, all data should be shown, but here it does not.

I'm using Angular 7 and Bootstrap 4. Thanks.

HTML:

<div class="mb-3">
                                            <div class="custom-control custom-switch mb-4">
                                                <input type="checkbox" class="custom-control-input" id="checkbox-all"  (click)="toggleAll('showAll')"/>
                                                <label class="custom-control-label" for="checkbox-all" ></label>
                                            </div>
                                            <div class="custom-control custom-checkbox mb-2" *ngIf = "this.showAll === false">
                                                <input type="checkbox" class="custom-control-input" id="checkbox-filter-issmeapproved" value="true" formControlName="isSmeApproved">
                                                <label class="custom-control-label" for="checkbox-filter-issmeapproved">Approve By SME</label>
                                            </div>
                                            <div class="custom-control custom-checkbox mb-2" *ngIf = "this.showAll === false">
                                                <input type="checkbox" class="custom-control-input" id="checkbox-filter-istaapproved" value="true" formControlName="isTAApproved">
                                                <label class="custom-control-label" for="checkbox-filter-istaapproved">Approve By TA</label>
                                            </div>
                                            <div class="custom-control custom-checkbox mb-2" *ngIf = "this.showAll === false">
                                                <input type="checkbox" class="custom-control-input" id="checkbox-filter-transfered" value="true" formControlName="isTransfered">
                                                <label class="custom-control-label" for="checkbox-filter-transfered">Transferred</label>
                                            </div>
                                            <div class="custom-control custom-checkbox" *ngIf = "this.showAll === false">
                                                <input type="checkbox" class="custom-control-input" id="checkbox-filter-dorreport" value="true" formControlName="isDorReport">
                                                <label class="custom-control-label" for="checkbox-filter-dorreport">DOR Report</label>
                                            </div>
                                        </div>

TS:

ngOnInit() {
    this.formFilter = this._formBuilder.group({
      keyword: null,
      isSmeApproved: null,
      isTAApproved: null,
      isTransfered: null,
      isDorReport: null
    });

   this.trimData();
   this.toggleAll('showAll');

  }

  trimData(){
  this.formFilter.valueChanges
  .pipe(
    startWith(this.formFilter.value),
    takeUntil(this.destroy$),
    tap(() => {
      this.tableLoading$.next(true);
    }),
    debounceTime(600),
    distinctUntilChanged(),
    switchMap(formValue => {
      return this._dataExtractionService.getReports()
        .pipe(
          tap(() => {
            this.tableLoading$.next(false);
          }),
          map(report => {

           if(this.showAll === true){

            if (formValue.isSmeApproved) {
               report.extractedReport = report.extractedReport.filter(r => r.isSmeApproved)
            }

            if (formValue.isTAApproved) {
              report.extractedReport = report.extractedReport.filter(r => r.isTAApproved);
            }

            if (formValue.isTransfered) {
              report.extractedReport = report.extractedReport.filter(r => r.isTransfered);
            }

            if (formValue.isDorReport) {
              report.extractedReport = report.extractedReport.filter(r => r.isDorReport);
            }

        } else {

            if (formValue.isSmeApproved) {
              report.extractedReport = report.extractedReport.filter(r => r.isSmeApproved);
            }
            if (!formValue.isSmeApproved) {
              report.extractedReport = report.extractedReport.filter(r => !r.isSmeApproved);
            }

            if (formValue.isTAApproved) {
              report.extractedReport = report.extractedReport.filter(r => r.isTAApproved);
            }
            if (!formValue.isTAApproved) {
              report.extractedReport = report.extractedReport.filter(r => !r.isTAApproved);
            }

            if (formValue.isTransfered) {
              report.extractedReport = report.extractedReport.filter(r => r.isTransfered);
            }
            if (!formValue.isTransfered) {
              report.extractedReport = report.extractedReport.filter(r => !r.isTransfered);
            }

            if (formValue.isDorReport) {
              report.extractedReport = report.extractedReport.filter(r => r.isDorReport);
            }
            if (!formValue.isDorReport) {
              report.extractedReport = report.extractedReport.filter(r => !r.isDorReport);
            }
          }

            return report;
          })
        )
    })
  )
  .subscribe();

}

toggleAll(type) {
  if (type === 'showAll') {
    this.showAll ? (this.showAll = false) : (this.showAll = true);
  }
}