创建多个表

Question

我正在调用一个子组件，这是app-table-multi-sort from deals-transaction.component.html，表中的数据来自_pageEventDealsList的结果，这是this.table.data = res.items;

我想要的是如何用不同的this创建不同的表集。tableOptions基于dealType值，如下面的对象所示。

如果dealType等于"A"然后在单独的表中显示数据，如果dealType等于"B"在单独的表上显示数据，因此在本例中有2个表，因为有2个不同的dealType。

现在我当前的代码都在一个表中，这是错误的。

，但我们应该只重用app-table-multi-sort来做到这一点，是否可能不重复app-table-multi-sort>?你们有主意吗?谢谢你。

#示例数据表结果截图

输入图片描述

# deals-transaction.component.html

<app-table-multi-sort (dataServiceEvent)="dataServiceEvent($event)" [tableOptions]="tableOptions" [tableData]="data"
(tableActionsEvent)="tableActions($event)" (editRowEvent)="editDeal($event)"></app-table-multi-sort>      

#tscode - deals-transaction.component.ts

export class DealsTransactionComponent implements OnInit {
@ViewChild(TableMultiSortComponent, { static: true }) tableMultiSortComponent: TableMultiSortComponent;
transactionSubscripion: Subscription;
tableOptions: any;
@Input() transaction: any;
isLoading: boolean;
accountId: any;
data: any;
searchInput: string;
leaseId : number;
table: any;
DEAL_TYPES = DEAL.TYPES;
menuItems: any[];
totalDealsForApproval: number;
totalDeals: number = 0;
hasPendingAprroval = false;
subscription!: Subscription; 
propertyId: any;
constructor(
private _snackBar: MatSnackBar,
private trasactionService: TransactionService,
private dialog: MatDialog,
private dealService: DealService,
private notificationService: NotificationService,
private route: Router,
private dealTransactionService: DealTransactionService

) {}
ngOnInit(): void {
this.leaseId = this.transaction.leaseId;
this.propertyId = this.transaction.propertyId;    
const currentAccountDetails = localStorage.getItem('currAcct') as any;
if (currentAccountDetails) {
this.accountId = JSON.parse(currentAccountDetails).accountId;
}
this.menuItems = [
{ dealType: this.DEAL_TYPES.IDLE_DISPOSITION, buttonText: this.DEAL_TYPES.IDLE_DISPOSITION.text , },
{ dealType: this.DEAL_TYPES.PARTNERSHIP, buttonText: this.DEAL_TYPES.PARTNERSHIP.text },
{ dealType: this.DEAL_TYPES.PORTFOLIO_MANAGEMENT, buttonText: this.DEAL_TYPES.PORTFOLIO_MANAGEMENT.text , condition: !this.leaseId },
]
this.tableOptions = {
columns:[
{id:'name',name:'Deal Name',subId:'type', subtitle:'Deal Type'},
{id:'annualRentProposed',name:'Annual Rent (Proposed)', subId: 'annualRentCurrent', subtitle:'Annual Rent (Proposed)'},
{id:'firmTermRemain',name:'Firm Term Remaining', subId: 'firmTermAdded', subtitle:'(Current)'},
{id:'maxTerm',name:'Max Available Term'},
{id:'cash',name:'Cash Contribution'},
{id:'action', name: 'Actions', actions:[
{icon:'file_copy', name:'Copy', class:'primary-color' , },
{icon:'delete', name: 'Delete', class:'mat-error ml-7px'},
{icon:'forward', name: 'For Approval', class:'primary-color'}
]}
]
}
this.subscription = this.dealTransactionService.dataSubject.subscribe((data: any) => {
this.editDeal(data);
});
}
dataServiceEvent(item) {
this.table = item;
if(this.table) {
this.reloadDeals();
}
}
reloadDeals() {
this._pageEventDealsList();
}
public _pageEventDealsList() {
this.searchInput = '';
const status = 'Draft'
this.isLoading = true;
this.dealService
.getAllDeals(
status,
this.accountId,
this.transaction.id,
this.table.pageIndex + 1,
this.table.pageSize,
this.searchInput,
this.table.sortParams,
this.table.sortDirs
)
.pipe(finalize(() => (this.isLoading = false)))
.subscribe({
error: (err) => this.notificationService.showError(err),
next: (res) => {
this.table.totalItemCount = res.totalItemCount;
this.table.lastItemOnPage = res.lastItemOnPage;
this.table.totalElements = res.totalItemCount;
this.table.data = res.items;
},
complete: noop,
});
}

#示例数据结果_pageEventDealsList

[
{
"id": 183,
"name": "A",
"dealType": "A",
"annualRentProposed": null,
"annualRentCurrent": null,
"firmTermRemaining": null,
"firmTermAdded": null,
"maxAvailableTerm": null,
"capitalContribution": null,
"createdOnString": "09/29/2021",
"fileName": null,
"serverFileName": null,
"size": null,
"absoluteUri": null,
"sentTo": null
},
{
"id": 186,
"name": "B",
"dealType": "B",
"annualRentProposed": null,
"annualRentCurrent": null,
"firmTermRemaining": null,
"firmTermAdded": null,
"maxAvailableTerm": null,
"capitalContribution": null,
"createdOnString": "09/29/2021",
"fileName": null,
"serverFileName": null,
"size": null,
"absoluteUri": null,
"sentTo": null
},
]

Answer 1

我还没有测试过这个，如果你有什么不明白的，请告诉我。

// Declare two variables 
dealsByTypeA$  = of([]);
dealsByTypeB$  = of([]);
const allDeals$ = this.dealService
.getAllDeals(
status,
this.accountId,
this.transaction.id,
this.table.pageIndex + 1,
this.table.pageSize,
this.searchInput,
this.table.sortParams,
this.table.sortDirs
)
.pipe(
tap(res => {
if(res){
this.table.totalItemCount = res.totalItemCount;
this.table.lastItemOnPage = res.lastItemOnPage;
this.table.totalElements = res.totalItemCount;
}
}),
catchError(error => this.handleError(error)),
finalize(() => (this.isLoading = false))
);
// Observable with dealType with 'A'        
this.dealsByTypeA$ = allDeals$ .pipe(
map(res => res.items.filter(o => o.dealType === 'A'));
);
// Observable with dealType with 'B'
this.dealsByTypeB$ = allDeals$ .pipe(
map(res => res.items.filter(o => o.dealType === 'B'));
);
handleError(error: any): Observable<PagedModel>{
this.notificationService.showError(error);
return of({ totalItemCount: 0, lastItemOnPage: 0, firstItemOnPage: true, isLastPage: true, items: [] });
}

在模板:

<app-table-multi-sort
...
[tableData]="dealsByTypeA$ | async">
</app-table-multi-sort>
<app-table-multi-sort
...
[tableData]="dealsByTypeB$ | async">
</app-table-multi-sort>

如果你只有两个dealTYpes，那么你也可以很容易地解决这个问题，使用RxJs分区操作符