我一直在尝试使用切换开关显示来自服务器的数据列表。

在第一次加载期间，将仅根据复选框过滤器显示数据（禁用“全部显示”）。这个有效。

Here is how data shows after filter

但是以某种方式，当我单击切换开关以显示所有数据都存在在列表中时，它不起作用。 （p / s：此处用户无法过滤任何内容，因为它仅显示所有可用数据。）

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

我正在使用Angular 7和Bootstrap4。谢谢。

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">{{ showAll ? 'Show All' : 'Sho 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);
    }
}