Angular 在单击时，切换不会按预期显示数据

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

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

但不知何故，当我单击切换以显示列表中存在的所有数据时，它不起作用。（p/s：此处用户无法筛选任何内容，因为它仅显示所有可用数据。）

我用的是Angular 7和Bootstrap 4。谢谢

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>

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);
    }
}

---

我相信你的切换函数没有被调用

这是因为您使用的是引导自定义控件，它只是一个视图框，用于替换原始输入（保持隐藏）。您可以查看页面，并将看到输入不是复选框出现的位置，而是处于移位位置。这会导致

click

事件不触发

只需将

单击

事件更改为

更改

事件即可

<div class="custom-control custom-switch mb-4">
    <input type="checkbox" class="custom-control-input" id="checkbox-all" (change)="toggleAll('showAll')" />
    <label class="custom-control-label" for="checkbox-all">{{ showAll ? 'Show All' : 'Sho All' }}</label>
</div>

{{showAll？'Show All'：'Sho All'}

我已经配置了错误。我只需要删除if语句中的过滤器，这样它就不会在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) {

                                }

                                if (formValue.isTAApproved) {

                                }

                                if (formValue.isTransfered) {

                                }

                                if (formValue.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();

}

---

我已经照你说的做了，但结果还是一样。是因为if语句吗？但是我不确定你的函数是如何被调用的？只需做一个控制台日志。如果正在工作，请检查

showAll

变量是否正在按预期更改值。很抱歉，我忘记提到这一点，当我单击“全部显示”时，它没有被调用。我有点困惑，我应该把它叫到哪里去。若你们在变更事件中打过电话，它应该是有效的。您能提供一个带有虚拟数据的stackblitz演示吗？尝试使用stackblitz进行演示，但错误太多