Question

我是angualr的新手，正在开发有关angular的应用程序。

我有一个表，其中将动态添加行，并且使用分页来遍历该表。我已经使用了每页5行，并且可以通过下拉菜单选择每页这些行。

问题面对：当我单击添加按钮时，每次添加行。添加5行后，如果我单击添加按钮，则将显示第二页分页。但是第二页中的行仅包含第一页的数据。

如果我选择下拉列表显示项目，则第6个项目将为空。

第2页分页下的第6个文本框选择第一页第1个输入的值。

请帮助我解决此分页问题。

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;

  constructor(private formBuilder: FormBuilder) {
    this.tableRowsToBeDisplayed = 5;
    this.totalTns = 0;
  }

  ngOnInit() {
    this.loadTablePaginationDropDowns();

    //load the form with all form controls.
    this.createOrderForm = this.formBuilder.group({
      tnList: this.formBuilder.array([]),
      tnListDropDown: ['']
    });

    // any change in the porting tn table pagination dropdown, it should reflect the value
    this.createOrderForm.get('tnListDropDown').valueChanges.subscribe(
      data => {
        this.changePortingTnDropDownValue(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'));
  }

   /**
    * 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;
    }
  }

}

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]="j"
                        *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>

</form>

StyleSheet

.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%;
}

分页无法正常工作-Ngx分页

TypeScript代码：

HTML代码：

StyleSheet

0 个答案: