切换时未显示预期的数据

Question

我一直在尝试使用切换器从服务器显示数据列表。

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

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

Answer 1

我相信您的切换功能没有被调用。

那是因为您正在使用bootstrap自定义控件，它只是一个替换原始输入（隐藏）的视图框。您可以检查页面，将看到输入不是复选框出现的位置，而是处于移位的位置。这会导致click事件无法触发。

只需将click事件更改为change事件。

<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>