我有 2 个表,每个表的行都是动态添加的。基于这些动态添加的行,将显示分页。一页显示的行数由下拉菜单决定。
面临的问题:只有当我开始将行添加到第二个表时,才会显示第一个表分页。
打字稿代码:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormArray, FormGroup } from '@angular/forms';
import { SelectItem } from 'primeng/api';
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
createOrderForm: FormGroup;
isAllPortTnsSelected: boolean;
tablePaginationDropDowns: SelectItem[];
tableRowsToBeDisplayed: number;
totalTns: number;
/**
* Disconnect TN's related fields
*/
isAllDisconnectTnsSelected: boolean;
totalDisconnectTns: number;
disconnectTableRows: number;
constructor(private formBuilder: FormBuilder) {
this.tableRowsToBeDisplayed = 5;
this.disconnectTableRows = 5;
this.totalTns = 0;
this.totalDisconnectTns = 0;
}
ngOnInit() {
this.loadTablePaginationDropDowns();
//load the form with all form controls.
this.createOrderForm = this.formBuilder.group({
tnList: this.formBuilder.array([]),
tnListDropDown: [''],
disconnectTnList: this.formBuilder.array([]),
disconnectTnDropDown: ['']
});
// any change in the porting tn table pagination dropdown, it should reflect the value
this.createOrderForm.get('tnListDropDown').valueChanges.subscribe(
data => {
this.changePortingTnDropDownValue(data);
}
)
//any change in the disconnect tn table pagination dropdown, it should reflect the value
this.createOrderForm.get('disconnectTnDropDown').valueChanges.subscribe(
data => {
this.changeDisconnectTnDropDownValue(data);
}
)
}
loadTablePaginationDropDowns() {
this.tablePaginationDropDowns = [
{ label: "5", value: "five" },
{ label: "10", value: "ten" },
{ label: "15", value: "fifteen" },
{ label: "20", value: "twenty" }
]
}
addTnGroup(): FormGroup {
return this.formBuilder.group({
tnCheckBox: [''],
fromTn: [''],
toTn: ['']
});
}
addTnRow() {
//get the reference for the portingTnList and add one more set of tnGroup
// before adding the tn group we need to typecast the control to FormArray
(<FormArray>this.createOrderForm.get('tnList')).push(this.addTnGroup());
this.totalTns = (<FormArray>this.createOrderForm.get('tnList')).length;
}
removeTnRow(group: FormArray = <FormArray>this.createOrderForm.get('tnList')) {
const tempArray: FormArray = new FormArray([]);
Object.keys(group.controls).forEach (
(key: string) => {
const abstractControl = group.get(key);
if(abstractControl instanceof FormGroup) {
if (!this.removeTnRowIfSelected(abstractControl)) {
tempArray.push(abstractControl);
}
}
}
);
while(group.length != 0) {
group.removeAt(0);
}
while(tempArray.length != 0) {
group.push(tempArray.at(0));
tempArray.removeAt(0);
}
this.totalTns = group.length;
}
removeTnRowIfSelected(group: FormGroup): boolean{
if (group.get('tnCheckBox') && group.get('tnCheckBox').value !== '') {
return true;
} else {
return false;
}
}
selectAllTns() {
this.selectAndDisSelectAllTns();
this.isAllPortTnsSelected = !this.isAllPortTnsSelected;
}
selectAndDisSelectAllTns(group: FormArray = <FormArray>this.createOrderForm.get('tnList')) {
Object.keys(group.controls).forEach(
(key: string) => {
const abstractControl = group.get(key);
if (abstractControl instanceof FormGroup) {
this.selectAndDisSelectTnsInGroup(abstractControl);
}
}
)
}
selectAndDisSelectTnsInGroup(group: FormGroup) {
if (!this.isAllPortTnsSelected) {
group.get('tnCheckBox').setValue('select');
} else {
group.get('tnCheckBox').setValue('');
}
}
AddBulkTns() {
console.log(this.createOrderForm.get('tnList'));
}
/**
* *******************************************************************************************************
* START OF CODE RELATED TO Disconnect TNs Table (which adds dynamically the rows and deletion of the rows)
* *******************************************************************************************************
*/
addDisconnectTnGroup(): FormGroup {
return this.formBuilder.group({
tnDisconnectCheckBox: [''],
fromDisconnectTn: [''],
toDisconnectTn: ['']
});
}
addDisconnectTnRow() {
//get the reference for the portingTnList and add one more set of tnGroup
// before adding the tn group we need to typecast the control to FormArray
(<FormArray>this.createOrderForm.get('disconnectTnList')).push(this.addDisconnectTnGroup());
this.totalDisconnectTns = (<FormArray>this.createOrderForm.get('disconnectTnList')).length;
}
removeDisconnectTnRow(group: FormArray = <FormArray>this.createOrderForm.get('disconnectTnList')) {
const tempArray: FormArray = new FormArray([]);
Object.keys(group.controls).forEach(
(key: string) => {
const abstractControl = group.get(key);
if (abstractControl instanceof FormGroup) {
if (!this.removeDisconnectTnRowIfSelected(abstractControl)) {
tempArray.push(abstractControl);
}
}
}
);
while (group.length != 0) {
group.removeAt(0);
}
while (tempArray.length != 0) {
group.push(tempArray.at(0));
tempArray.removeAt(0);
}
this.totalDisconnectTns = group.length;
}
removeDisconnectTnRowIfSelected(group: FormGroup): boolean {
if (group.get('tnDisconnectCheckBox') && group.get('tnDisconnectCheckBox').value !== '') {
return true;
} else {
return false;
}
}
selectAllDisconnectTns() {
this.selectAndDisSelectAllDisconnectTns();
this.isAllDisconnectTnsSelected = !this.isAllDisconnectTnsSelected;
}
selectAndDisSelectAllDisconnectTns(group: FormArray = <FormArray>this.createOrderForm.get('disconnectTnList')) {
console.log('selectAndDisSelectAllDisconnectTns');
Object.keys(group.controls).forEach(
(key: string) => {
const abstractControl = group.get(key);
if (abstractControl instanceof FormGroup) {
this.selectAndDisSelectDisconnectTnsInGroup(abstractControl);
}
}
)
}
selectAndDisSelectDisconnectTnsInGroup(group: FormGroup) {
if (!this.isAllDisconnectTnsSelected) {
group.get('tnDisconnectCheckBox').setValue('select');
} else {
group.get('tnDisconnectCheckBox').setValue('');
}
}
AddBulkDisconnectTns() {
console.log(this.createOrderForm.get('disconnectTnList'));
}
/**
* *******************************************************************************************************
* END OF CODE RELATED TO Disconnect TNs Table (which adds dynamically the rows and deletion of the rows)
* *******************************************************************************************************
*/
/**
* Method changeDropDownValue() used to reflect the changes done for the dropdown values which are used to
* decide the number of rows to be displayed in the table
*
* @param data : Accepts the string value of dropdown
*/
changePortingTnDropDownValue(data: string) {
if (data === 'ten') {
this.tableRowsToBeDisplayed = 10;
} else if (data === 'fifteen') {
this.tableRowsToBeDisplayed = 15;
} else if (data === 'twenty') {
this.tableRowsToBeDisplayed = 20;
} else {
this.tableRowsToBeDisplayed = 5;
}
}
changeDisconnectTnDropDownValue(data: string) {
if (data === 'ten') {
this.disconnectTableRows = 10;
} else if (data === 'fifteen') {
this.disconnectTableRows = 15;
} else if (data === 'twenty') {
this.disconnectTableRows = 20;
} else {
this.disconnectTableRows = 5;
}
}
}
HTML 代码:
<h3>Dynamic</h3>
<form [formGroup]="createOrderForm">
<div class="div-grid">
<div style="width: 100%;">
<div class="top-div-checkbox">
<input class="form-check-input position-static" type="checkbox" style="margin-left: 30%; width: auto"
(click)="selectAllTns()">
</div>
<div class="top-div-label1">
<label>From TN</label>
</div>
<div class="top-div-label2">
<label>To TN</label>
</div>
</div>
<div id="gridDiv">
<table class="test">
<tbody formArrayName="tnList">
<tr [formGroupName]="i"
*ngFor="let tnGroup of createOrderForm.get('tnList').controls |
paginate:{itemsPerPage: tableRowsToBeDisplayed, currentPage: page}; let j = index">
<td class="td-checkbox">
<input type="checkbox" formControlName="tnCheckBox" [id]="'tnCheckBox'+j">
</td>
<td class="td-input1">
<input type="text" formControlName="fromTn" [id]="'fromTn'+j">
</td>
<td class="td-input2">
<input type="text" formControlName="toTn" [id]="'toTn'+j">
</td>
</tr>
</tbody>
</table>
</div>
<div class="nav-div">
<div class="pagination-div">
<pagination-controls previousLabel="" nextLabel="" (pageChange)="page = $event"></pagination-controls>
</div>
<div class="page-dropdown-div">
<select name="tnListPageDropDown" id="tnListPageDropDown" class="custom-select mr-sm-2"
formControlName="tnListDropDown" style="width: 60px">
<option value="" disabled selected>5</option>
<option *ngFor="let dropDown of tablePaginationDropDowns" [value]="dropDown.value">{{dropDown.label}}</option>
</select>
<label> items per Page</label>
</div>
<div class="total-items-div">
Total {{totalTns}} items
</div>
</div>
<div>
<button type="button" class="btn btn-info list-btns" (click)="addTnRow()">Add</button>
<button type="button" class="btn btn-info list-btns" (click)="removeTnRow()">Remove</button>
<button type="button" class="btn btn-info list-btns" (click)="AddBulkTns()">Bulk Add</button>
</div>
</div>
<div class="div-grid">
<div style="width: 100%;">
<div class="top-div-checkbox">
<input class="form-check-input position-static" type="checkbox" style="margin-left: 30%; width: auto"
(click)="selectAllDisconnectTns()">
</div>
<div class="top-div-label1">
<label>From TN</label>
</div>
<div class="top-div-label2">
<label>To TN</label>
</div>
</div>
<div id="gridDiv">
<table class="test">
<tbody formArrayName="disconnectTnList">
<tr [formGroupName]="i"
*ngFor="let discTnGroup of createOrderForm.get('disconnectTnList').controls |
paginate:{itemsPerPage: disconnectTableRows, currentPage: discTnPage}; let i = index">
<td class="td-checkbox">
<input type="checkbox" formControlName="tnDisconnectCheckBox"
[id]="'tnDisconnectCheckBox'+i">
</td>
<td class="td-input1">
<input type="text" formControlName="fromDisconnectTn" [id]="'fromDisconnectTn'+i">
</td>
<td class="td-input2">
<input type="text" formControlName="toDisconnectTn" [id]="'toDisconnectTn'+i">
</td>
</tr>
</tbody>
</table>
</div>
<div class="nav-div">
<div class="pagination-div">
<pagination-controls previousLabel="" nextLabel="" (pageChange)="discTnPage = $event">
</pagination-controls>
</div>
<div class="page-dropdown-div">
<div style="width: 25%; float: left;">
<select name="tnListPageDropDown" id="tnListPageDropDown" class="custom-select mr-sm-2"
formControlName="tnListDropDown" style="width: 60px">
<option value="" disabled selected>5</option>
<option *ngFor="let dropDown of tablePaginationDropDowns" [value]="dropDown.value">
{{dropDown.label}}</option>
</select>
</div>
<div style="width: 75%; float: right;">
<label> items per Page</label>
</div>
</div>
<div class="total-items-div">
Total {{totalDisconnectTns}} items
</div>
</div>
<div>
<button type="button" class="btn btn-info list-btns" (click)="addDisconnectTnRow()">Add</button>
<button type="button" class="btn btn-info list-btns" (click)="removeDisconnectTnRow()">Remove</button>
<button type="button" class="btn btn-info list-btns" (click)="AddBulkDisconnectTns()">Bulk Add</button>
</div>
</div>
</form>
CSS 样式表:
.test {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
table-layout:fixed;
border: 1px solid #ddd;
}
div {
border: 1px solid #ddd;
}
.test th, .test td {
border: 1px solid #ddd;
padding: 8px;
}
.test tr:nth-child(even) {
background-color: #f2f2f2;
}
#gridDiv {
width: 100%;
overflow-y:auto;
height: 200px;
border: 1px solid black;
}
.div-grid {
border: 1px solid black;
width: 50%;
}
td input {
width: 100%;
}
.td-checkbox {
width: 7%;
}
.td-input1{
width: 60%;
}
.td-input2{
width: 33%;
}
.top-div-checkbox {
width: 7%;
border: 1px solid #ddd;
float: left;
}
.top-div-label1 {
width: 60%;
border: 1px solid #ddd;
float: left;
}
.top-div-label2 {
width: 33%;
border: 1px solid #ddd;
float: left;
}
.nav-div {
border: 1px solid #ddd;
height: 48px;
}
.pagination-div {
width: 50%;
float: left;
}
.page-dropdown-div {
width: 30%;
float: left;
}
.total-items-div {
width: 20%;
float: left;
}
.list-btns {
padding-left: 5%;
padding-right: 5%;
margin-right: 10%;
margin-left: 2%;
}
但是向第二个表添加行后显示分页,但不正确
请帮我解决分页问题,或者为 Angular 推荐一些好的分页示例