Toggle не показывает данные, как предполагалось при нажатии - PullRequest
Новая
       18

Toggle не показывает данные, как предполагалось при нажатии

0 голосов
/ 06 ноября 2019

Я пытался отобразить список данных с сервера с помощью переключателя.

Во время первой загрузки данные будут отображаться только в соответствии с фильтром флажка (отключено «Показать все»),Это работает.

Вот как данные отображаются после фильтра

Но почему-то, когда я нажимаю на переключатель, чтобы показать все данные существуют всписок, это не работает. (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>

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

Ответы [ 2 ]

0 голосов
/ 14 ноября 2019

Я уже настроил ошибку. Мне просто нужно удалить фильтр внутри оператора if, чтобы он не отфильтровывал данные во время Show All, показывая все данные. 

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

}
0 голосов
/ 06 ноября 2019

Я считаю, что ваша функция переключения не вызывается.

Это потому, что вы используете загрузочный пользовательский элемент управления , который представляет собой просто окно просмотра, заменяющее исходный ввод (который остается скрытым). Вы можете просмотреть страницу и увидеть, что ввод не там, где появляется флажок, а в смещенном положении. Это приводит к тому, что событие 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>
...