对于HTML表格，应该出现“垂直无限滚动”。
请在此处找到控制器代码， 这是我的控制器代码。 如果您需要其他详细信息，请告诉我 提前致谢 ， 所以在这里我需要无限的垂直滚动。 当我向下滚动时，它会显示直到最后的记录，但是现在它只显示10条记录
onScrolled(event) {
if (event && event.srcElement) {
const scrollHeight = event.srcElement.scrollHeight;
const scrollTop = event.srcElement.scrollTop;
const offsetHeight = event.srcElement.offsetHeight;
if (offsetHeight + scrollTop >= scrollHeight && this.allowAPICall && !this.completeDataLoaded) {
const accountIds = this.getAccounts();
this.initializeLoadTransactions(accountIds, this.selectedFilters.type);
}
}
this.sortingColumn = [];
}
这是CSS代码，我做了以下更改 但我无法获得无限的垂直滚动。 在这里，我已经使用tran-table无限滚动到HTML表
table {
background: linear-gradient(90deg, rgb(240, 240, 240), rgb(250, 250, 250));
overflow: auto;
height: 100%;
th {
color: blue;
border-top: 0;
padding: 20px 0px 20px 15px;
font-size: 1rem !important;
}
tbody tr {
border-top: 1px solid #ececec;
td {
padding: 25px 0px 25px 15px;
font-size: 1rem;
border-top: 0;
vertical-align: top;
}
}
}
.table thead th {
vertical-align: initial !important;
}
.transDetailsRecord {
overflow: auto;
height: 100%;
}
.tran-table::-webkit-scrollbar {
width: 5px;
}
.tran-table::-webkit-scrollbar-thumb {
background: #888;
}This is the HTML code and done below changes but I am unable to get the Infinte vertical scroll Here I have done with transtable for Infinte scroll to a html table
<div class="transDetailsRecord">
<table class="table ">
<caption class="sr-only">Your Transactions</caption>
<thead>
<th (click)="transactionSorting('date');">
Date <i class="fa" [ngClass]="sortingIconClass('date')" aria-hidden="true"></i>
</th>
<th (click)="transactionSorting('accountId');">
Account #<i class="fa" [ngClass]="sortingIconClass('accountId')" aria-hidden="true"></i>
</th>
<th (click)="transactionSorting('accountNickName');">
Account Nickname<i class="fa" [ngClass]="sortingIconClass('accountNickName')" aria-hidden="true"></i>
</th>
<th (click)="transactionSorting('transaction');">
Transaction Type <i class="fa" [ngClass]="sortingIconClass('transaction')" aria-hidden="true"></i>
</th>
<th (click)="transactionSorting('symbolcusip');">
Symbol/CUSIP <i class="fa" [ngClass]="sortingIconClass('symbolcusip')" aria-hidden="true"></i>
</th>
<th (click)="transactionSorting('description');">
Description <i class="fa" [ngClass]="sortingIconClass('description')" aria-hidden="true"></i>
</th>
<th (click)="transactionSorting('heldin');">
Held In <i class="fa" [ngClass]="sortingIconClass('heldin')" aria-hidden="true"></i>
</th>
<th (click)="transactionSorting('quantity');">
Qty <i class="fa" [ngClass]="sortingIconClass('quantity')" aria-hidden="true"></i>
</th>
<th (click)="transactionSorting('price');">
Price <i class="fa" [ngClass]="sortingIconClass('price')" aria-hidden="true"></i>
</th>
<th (click)="transactionSorting('amount');">
Value ($) <i [ngClass]="sortingIconClass('amount')" aria-hidden="true"></i>
</th>
</thead>
<tbody *ngIf="loading || error || noData">
<tr>
<td colspan="10" style="
text-align: center" *ngIf="loading">
<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
</td>
<td colspan="10" style="
text-align: center" *ngIf="error">
<ngb-alert [dismissible]="false" type="danger">{{errorMessage}}</ngb-alert>
</td>
<td colspan="10" style="
text-align: center" *ngIf="noData">
<ngb-alert [dismissible]="false" type="info">No transactions available</ngb-alert>
</td>
</tr>
</tbody>
<tbody class="tran-table" *ngIf="transactions?.length > 0 && !loading && !error && !noData" (scroll)="onScrolled($event);">
<ng-container *ngFor="let t of transactions">
<tr>
<td>{{t.date?.format('MM/DD/YYYY')}}</td>
<td>{{t.accountNumber | maskAccountno: maskAccountNo}}</td>
<td>{{t.accountNickName}}</td>
<td>{{t.transaction}}</td>
<td>{{t.symbolcusip}}</td>
<td>{{t.description | titlecase}}</td>
<td>{{t.heldin}}</td>
<td>{{t.quantity}}</td>
<td>{{t.price | currency}}</td>
<td>{{t.amount | currency}}</td>
</tr>
<tr *ngIf="t.showRealizedData">
<th>Puchase Date</th>
<th>Quantity</th>
<th>Unit Cost($)</th>
<th>Cost Basis($)</th>
<th>Price($)</th>
<th>Value($)</th>
<th>Short term<br>Gain/Loss($)</th>
<th style="border-right: 0;">Long term<br>Gain/Loss($)</th>
<th style="width: 12%;border-right: 0;">
<img class="icon mr-3" title="Export CSV" *ngIf="t.subTransactions?.length > 0" (click)="download('text/csv')" src="./assets/images/export_CSV.png" />
</th>
</tr>
<ng-container *ngIf="t.showRealizedData">
<tr *ngIf="subTableLoading || subTableError || subTableNoData">
<td *ngIf="subTableLoading">
<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
</td>
<td *ngIf="subTableError">
<ngb-alert [dismissible]="false" type="danger">{{errorMessage}}</ngb-alert>
</td>
<td *ngIf="subTableNoData">
<ngb-alert [dismissible]="false" type="info">No transactions available</ngb-alert>
</td>
</tr>
<ng-container *ngIf="!subTableLoading && !subTableError && !subTableNoData">
<tr *ngFor="let st of t.subTransactions;let i = index;" [ngClass]="{'sub-table-last-row': t.subTransactions.length-1 === i}">
<td><span class="t-sub-cell1">{{st.acquisitionDate
| date : 'MMM d, y'}}</span></td>
<td><span class="t-sub-cell1">{{st.quantity}}</span></td>
<td><span class="t-sub-cell1">{{st.avgCostIndicator}}</span></td>
<td><span class="t-sub-cell1">{{st.adjustedCost}}</span></td>
<td><span class="t-sub-cell1">{{st.purchaseCost}}</span></td>
<td><span class="t-sub-cell1">{{st.soldValue}}</span></td>
<td><span class="t-sub-cell1">{{st.shortTermGainLoss}}</span></td>
<td style="border-right: 0;"><span class="t-sub-cell1">{{st.longTermGainLoss}}</span></td>
</tr>
</ng-container>
</ng-container>
</ng-container>
<tr *ngIf="!allowAPICall">
<td>
<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
</td>
</tr>
</tbody>
</table>
</div>