angular - 清晰度数据网格在使用内置字符串过滤器过滤数字时遇到问题
问题描述
我正在使用 Clarity 的数据网格来显示带有过滤和分页选项的表格。我的两列是嵌套对象,但是这两列的过滤器 - 看护人姓名和看护人代码不起作用;结果是一个空对象。过滤器在未嵌套的状态列上工作正常,因此我使用没有方括号的 clrDgField="status"。amount 也不起作用 - 这意味着输入数字时对象为空。*我刚刚意识到问题不在于嵌套对象;当您输入全名时,护理人员姓名列确实有效。似乎只有数字过滤器(如数量和代码)不起作用。*如果我将 Firestore 中的类型更改为字符串,它会起作用。我想知道这是不是唯一的方法。这是我的代码:模板
<ng-container *ngIf="vm$ | async as transactions">
<clr-datagrid style="min-height: 16rem"
(clrDgRefresh)="onTableRefresh($event)">
<clr-dg-column>
Date Requested
</clr-dg-column>
<clr-dg-column>
<ng-container *clrDgHideableColumn="{hidden: true}">
Transaction ID
</ng-container>
</clr-dg-column>
<clr-dg-column clrDgField="amount">
Amount
</clr-dg-column>
<clr-dg-column [clrDgField]="'caregiver.name'">
<ng-container *clrDgHideableColumn="{hidden: false}">
Caregiver Name
</ng-container>
</clr-dg-column>
<clr-dg-column clrDgField="caregiver.caregiverCode">
<ng-container *clrDgHideableColumn="{hidden: false}">
Caregiver Code
</ng-container>
</clr-dg-column>
<clr-dg-column>
<ng-container *clrDgHideableColumn="{hidden: true}">
Bank Account ID
</ng-container>
</clr-dg-column>
<clr-dg-column>
<ng-container *clrDgHideableColumn="{hidden: true}">
Benefit Card ID
</ng-container>
</clr-dg-column>
<clr-dg-column>
<ng-container>
Benefit Card Auth. Status
</ng-container>
</clr-dg-column>
<clr-dg-column>
<ng-container *clrDgHideableColumn="{hidden: true}">
Caregiver ID
</ng-container>
</clr-dg-column>
<clr-dg-column>
<ng-container *clrDgHideableColumn="{hidden: true}">
Debit card ID
</ng-container>
</clr-dg-column>
<clr-dg-column>
<ng-container *clrDgHideableColumn="{hidden: true}">
Processing Fee
</ng-container>
</clr-dg-column>
<clr-dg-column clrDgField="status">
<ng-container *clrDgHideableColumn="{hidden: false}">
Status
</ng-container>
</clr-dg-column>
<clr-dg-column>
<ng-container>
Payback Date
</ng-container>
</clr-dg-column>
<clr-dg-column>
<ng-container>
Number of Weeks
</ng-container>
</clr-dg-column>
<clr-dg-row *ngFor="let transaction of transactions" [clrDgItem]="transaction">
<clr-dg-cell>{{transaction?.requestedAt?.toMillis() | date: 'medium'}}</clr-dg-cell>
<clr-dg-cell>{{transaction?.transactionId}}</clr-dg-cell>
<clr-dg-cell>{{transaction?.amount | currency}}</clr-dg-cell>
<clr-dg-cell>{{transaction?.caregiver?.name | titlecase}}</clr-dg-cell>
<clr-dg-cell>{{transaction?.caregiver?.caregiverCode}}</clr-dg-cell>
<clr-dg-cell>{{transaction?.bankAccountId}}</clr-dg-cell>
<clr-dg-cell>{{transaction?.benefitCardId}}</clr-dg-cell>
<clr-dg-cell class="center">
<div>
<span *ngIf="transaction?.benefitCardAuth?.succeeded == true">
<cds-icon shape="success-standard" status="success" solid></cds-icon></span>
<span *ngIf="transaction?.benefitCardAuth?.succeeded == false">
<cds-icon shape="error-standard" status="danger" solid></cds-icon></span>
</div>
</clr-dg-cell>
<clr-dg-cell>{{transaction?.caregiverId}}</clr-dg-cell>
<clr-dg-cell>{{transaction?.debitCardId}}</clr-dg-cell>
<clr-dg-cell>{{transaction?.processingFee | currency}}</clr-dg-cell>
<clr-dg-cell>{{transaction?.status}}</clr-dg-cell>
<clr-dg-cell>{{transaction?.paybackDate.toDate() | date: 'medium'}}</clr-dg-cell>
<clr-dg-cell class="center">{{transaction?.weekNumber}}</clr-dg-cell>
</clr-dg-row>
<clr-dg-detail *clrIfDetail="let detail">
<clr-dg-detail-body>
<ul class="clr-timeline clr-timeline-horizontal">
<li class="clr-timeline-step disabled">
<ng-container *ngTemplateOutlet="timelineStep; context:{data: { title: 'Benefit Card Authorization', success:
detail?.benefitCardAuth?.succeeded, error: detail?.benefitCardAuth && !detail?.benefitCardAuth?.succeeded, missing: !detail?.benefitCardAuth}}"></ng-container>
</li>
<li class="clr-timeline-step disabled">
<ng-container *ngTemplateOutlet="timelineStep; context:{data: { title: 'Instant Card Payments', success:
detail?.debitCardInstantPay?.status === 'PAID', inProcess:
detail?.debitCardInstantPay && detail.debitCardInstantPay.status === 'IN_PROCESS', error:
detail?.debitCardInstantPay && (detail.debitCardInstantPay.status === 'ERROR' ||
detail.debitCardInstantPay.status === 'UNPAID' ||
detail.debitCardInstantPay.status === 'VOID' ||
detail.debitCardInstantPay.status === 'EXPIRED' ) , missing:
!detail?.debitCardInstantPay}}"></ng-container>
</li>
<li class="clr-timeline-step disabled">
<ng-container *ngTemplateOutlet="timelineStep; context:{data: { title: 'Benefit Card Capture', success:
detail?.benefitCardCapture?.succeeded, error: detail?.benefitCardCapture && !detail?.benefitCardCapture?.succeeded, missing: !detail?.benefitCardCapture}}"></ng-container>
</li>
<li class="clr-timeline-step disabled">
<ng-container *ngTemplateOutlet="timelineStep; context:{data: { title: 'Payback Schedule', success:
detail?.paybackSchedule?.status === 'COMPLETED', scheduled:
detail?.paybackSchedule?.status === 'SCHEDULED', error:
detail?.paybackSchedule && (detail.paybackSchedule.status === 'CANCELLED' ||
detail.paybackSchedule.status === 'ERROR') , missing:
!detail?.paybackSchedule}}"></ng-container>
</li>
</ul>
<clr-tabs>
<clr-tab>
<button clrTabLink>Benefit Card Authorization/Capture</button>
<clr-tab-content *clrIfActive>
<app-benefit-cards [transactionId]="detail?.transactionId"></app-benefit-cards>
</clr-tab-content>
</clr-tab>
<clr-tab>
<button clrTabLink>Instant Payments</button>
<clr-tab-content *clrIfActive>
<app-instant-payments [transactionId]="detail?.transactionId"></app-instant-payments>
</clr-tab-content>
</clr-tab>
<clr-tab>
<button clrTabLink>Payback Schedules</button>
<clr-tab-content *clrIfActive>
<app-payback-schedule> [transactionId]="detail?.transactionId"></app-payback-schedule>
</clr-tab-content>
</clr-tab>
</clr-tabs>
</clr-dg-detail-body>
</clr-dg-detail>
<clr-dg-footer>
<button (click)="previousPage()" class="btn btn btn-info btn-sm float-right">Prev</button>
<button (click)="nextPage()" class="btn btn btn-info btn-sm float-left">Next</button>
</clr-dg-footer>
</clr-datagrid>
</ng-container>
<ng-template #timelineStep let-detail=data>
<li class="clr-timeline-step disabled">
<span aria-label="succeeded" *ngIf="detail.success"><cds-icon shape="success-standard" status="success"
solid></cds-icon></span>
<span aria-label="in_process" *ngIf="detail.inProcess"><cds-icon shape="error-standard" status="warning"
solid></cds-icon></span>
<span aria-label="scheduled" *ngIf="detail.scheduled"><cds-icon shape="alarm-clock" status="success"
solid></cds-icon></span>
<span aria-label="failed" *ngIf="detail.error"><cds-icon shape="error-standard" status="danger"
solid></cds-icon></span>
<span aria-label="missing" *ngIf="detail.missing"><cds-icon shape="circle"></cds-icon></span>
<div class="clr-timeline-step-body">
<span class="clr-timeline-step-title">{{detail.title}}</span>
<span class="clr-timeline-step-description" *ngIf="detail.description">{{detail.description}}</span>
</div>
</li>
</ng-template>
零件:
import {ChangeDetectionStrategy, Component, Input, OnInit} from '@angular/core';
import {catchError, distinctUntilChanged, map, switchMap, tap} from 'rxjs/operators';
import {AngularFirestore} from '@angular/fire/firestore';
import {Transaction, TransactionState} from './Transaction.interface';
import {BehaviorSubject, Observable} from 'rxjs';
// @ts-ignore
import {Paginator} from './Paginator.interface';
import {ClrDatagridStateInterface} from '@clr/angular';
let STATE: TransactionState = {
transactions: [],
pagination: {
after: undefined,
before: undefined,
limit: 10,
filters: [],
}
};
@Component({
selector: 'app-transactions',
templateUrl: './transactions.component.html',
styleUrls: ['./transactions.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TransactionsComponent implements OnInit {
@Input() caregiverId: any;
// public transactions: Transaction[];
// public transactionId;
store = new BehaviorSubject(STATE);
public state$ = this.store.asObservable();
dataGridTimeout: any;
transactions$ = this.state$.pipe(
map((state) => state.transactions),
distinctUntilChanged(),
);
pagination$ = this.state$.pipe(
map((state) => state.pagination),
distinctUntilChanged(),
);
vm$ = this.pagination$.pipe(switchMap((pagination
) => this.afs
.collection<Transaction>('transactions', (ref) => {
let query: any = ref;
if (this.caregiverId) {
query = query
.where('caregiverId', '==', this.caregiverId);
}
if (pagination.filters?.length){
for (const filter of pagination.filters) {
const property = filter.property;
const value = filter.value;
query = query.where(property, '==', value);
}
}
if (pagination.after) {
query = query
.orderBy('requestedAt', 'desc')
.orderBy('transactionId')
.startAfter(pagination.after.requestedAt, pagination.after.transactionId)
.limit(pagination.limit);
} else if (pagination.before) {
query = query
.orderBy('requestedAt', 'desc')
.orderBy('transactionId')
.endBefore(pagination.before.requestedAt, pagination.before.transactionId)
.limitToLast(pagination.limit);
} else {
query = query
.orderBy('requestedAt', 'desc')
.limit(pagination.limit);
}
return query;
})
.valueChanges().pipe(
tap(transactionsArray => {
const transactions = transactionsArray;
this.updateState({...STATE, transactions});
console.log(transactions);
}
))),
catchError(err => {
console.log(err)
return []
})
);
constructor(public afs: AngularFirestore) {
// this.vm$.subscribe(d =>{
// const transactions = d;
// this.updateState({...STATE, transactions});
// console.log(d);
// })
}
onTableRefresh(state: ClrDatagridStateInterface<Transaction>): void {
this.setDataGridState(state);
if (this.dataGridTimeout) {
clearTimeout(this.dataGridTimeout);
}
}
setDataGridState(tableState: ClrDatagridStateInterface): void {
const dataState = this.store.getValue();
const pagination = Object.assign({},dataState.pagination);
const filters: any = {};
pagination.filters = tableState.filters;
this.updateState({...STATE, pagination});
}
nextPage(): void {
const state = this.store.getValue();
const pagination: Paginator = {
after: state.transactions[state.transactions.length - 1],
before: undefined,
limit: state.pagination.limit,
};
console.log(pagination);
this.updateState({...STATE, ...pagination});
}
previousPage(): void {
const state = this.store.getValue();
const pagination: Paginator = {
before: state.transactions[0],
after: undefined,
limit: state.pagination.limit,
};
console.log(pagination);
this.updateState({...STATE, pagination});
}
updatePageLimit(limit: number): void {
let pagination = this.store.getValue().pagination;
pagination = {...pagination, limit};
this.updateState({...STATE, pagination});
}
private updateState(state: TransactionState): void {
this.store.next((STATE = {...state}));
}
ngOnInit(): void {
}
}
解决方案
推荐阅读
- opencv - 可以沿对象生成边界框的对象识别算法
- javascript - 对象数组的复杂解构
- command-line-interface - Shopware 6:创建管理员用户的 CLI 命令不起作用
- javascript - Javascript变量问题多次命中
- state-machine - 有限状态自动机中的被动学习
- laravel - 如何修复laravel中“字段列表”中未找到1054个未知列“0”的列
- css - 重复渐变背景在 Internet Explorer 中不起作用
- ios - 如何在 iOS 中将图像分享到 Google 课堂?
- angular - 使用 Angular CLI 运行项目会引发错误
- javascript - JavaScript 代码的效果更改对应用程序性能的任何地方都有影响?