У меня есть 2 таблицы, где строки каждой таблицы добавляются динамически.На основе этих динамически добавленных строк будет отображаться нумерация страниц.Количество строк, отображаемых для одной страницы, определяется в раскрывающемся списке.
Проблема: Столкновение в первой таблице будет отображаться только при начале добавления строк во вторую таблицу.
Код TypeScript:
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