Угловой 6: используйте ngx-pagination для formArray в * ngFor, чтобы не изменять элементы управления в представлении - PullRequest
Новая
       44

Угловой 6: используйте ngx-pagination для formArray в * ngFor, чтобы не изменять элементы управления в представлении

0 голосов
/ 18 апреля 2019

Я создаю угловой проект 6, в котором я выбираю вложенный объект компании, который содержит несколько адресов для отображения в представлении.Я хочу отобразить только два из них для каждого дочернего вида и использовать нумерацию страниц для отображения остальных.Я использую ngx-нумерацию страниц и реактивные формы.

Но, к сожалению, нумерация страниц не работает правильно.Он отображает только первые два адреса (если «pageSize» = 2) и ничего не меняется, когда я нажимаю на элемент управления нумерацией страниц.Изменяется только значение «currentPage» (в моем случае p).

Если я проверяю объект своей компании, он заполняется всеми существующими адресами этой компании, но я не получаю их смещение.

Что я делаю не так?

Если я изменю «itmesPerPage» на количество выходящих адресов, я могу отобразить все из них - вот и все.

Для тестирования я использовал«труба сращивания», но эффект тот же.Я могу отображать только первые адреса и никогда - например - последний.

Если я «проверю» свой элемент в представлении и нажму на элементы управления, изменение страницы будет распознано, но ничего не изменится.

Это мой «компонент компании» для созданияабстрактный контролирует и загружает данные с сервера:

ngOnInit () {

 this.companyDetailForm = this.formBuilder.group({
      id: [null],
      companyName: [''],
      middleName: [''],
      lastName: [''],
      created: [null],
      status: [''],
      isDeleted: [null],
      contactAddresses: this.formBuilder.array([
        this.addContactAddressFormGroup()
      ])
});
//Load the data
this.route.data.subscribe(data => {
  this.company = data['company']; // 'company' = name (..resolve: {company: ...) from route path in routes.ts
  this.companyDetailForm.patchValue({
   id: this.company.id,
   companyName: this.company.companyName,
   middleName: this.company.middleName,
   lastName: this.company.lastName,
   created: this.company.created,
   status: this.company.status,
   isDeleted: this.company.isDeleted,
   contactAddresses: this.company.contactAddresses
  });

  this.companyDetailForm.setControl('contactAddresses',
                                        this.setExistingContactAddresses(this.company.contactAddresses) );

  });

} 

// initialize Form
addContactAddressFormGroup(): FormGroup {
return this.formBuilder.group({
  contactId: [null],
  addressId: [null],
  line1: ['Test'],
  line2: ['Test2'],
  line3: ['Test3'],
  city: [''],
  region: [''],
  postalCode: [''],
  country: [''],
  created: [''],
  status: [''],
  isDeleted: [null],
  addressType: [''],
});

} 

setExistingContactAddresses(conAddSets: ContactAddress[]): FormArray {
const conAddFormArray = new FormArray([]);
conAddSets.forEach(cas => {
  conAddFormArray.push(this.formBuilder.group({
    line1: cas.line1,
    line2: cas.line2,
    line3: cas.line3,
    postalCode: cas.postalCode,
    city: cas.city,
    region: cas.region,
    country: cas.country
  }));
});
console.log(this.companyDetailForm);
return conAddFormArray;

}

Соответствующая часть представления, где должно произойти волшебство:

....... 

<div class col-sm-8>
        <div class="tab-panel">
            <tabset class="company-tabset">
                <tab heading="Addresses">
                  <div class="card-deck" style="width: auto">
                  <div formArrayName="contactAddresses"  *ngFor="let contactAddress of companyDetailForm['controls']['contactAddresses']['controls'] | paginate: { itemsPerPage: pageSize, currentPage: p } ; let i = index" >
                    <div [formGroupName]="i">
                      <div class="card">
                        <div class="card-header">

                        </div>
                        <div class="card-body" >
                          <div class="card-text">
                              <div class="form-group" aria-autocomplete="none">
                                  <strong><label for="line1">Street</label></strong>
                                  <input class="form-control" type="text" id="line1" formControlName="line1">
                                  <input class="form-control" type="text" id="line2" formControlName="line2">
                                  <input class="form-control" type="text" id="line3" formControlName="line3">
                              </div>
                              <div class="form-group" aria-autocomplete="none">
                                  <strong><label for="postalCode">Zip - City - Region</label></strong>
                                  <input class="form-control" type="text" id="postalCode" formControlName="postalCode">
                                  <input class="form-control" type="text" id="city" formControlName="city">
                                  <input class="form-control" type="text" id="region" formControlName="region">
                              </div>
                              <div class="form-group" aria-autocomplete="none">
                                  <strong><label for="country">Country</label></strong>
                                  <input class="form-control" type="text" id="country" formControlName="country">
                              </div>

                          </div>
                        </div>
                      </div>


                    </div>                                           

                  </div>                  

                  </div>

                  <div class="text-center mt-4">
                    <pagination-controls (pageChange)="p = $event" autoHide="true"></pagination-controls>
                    {{p}}
                  </div>                                           


                </tab>

Я новичок в угловых и любая помощь будетБудьте благодарны.

Большое спасибо заранее Том

...