Angular 角度6：在*ngFor中对formArray使用ngx分页不会更改视图中的控件

我创建了一个angular 6项目，在该项目中获取一个嵌套的company对象，该对象包含多个要在视图中显示的地址。 我希望每个子视图只显示其中两个，并使用分页来显示其余的。 我使用ngx分页和反应形式

但不幸的是，分页不正确。它只显示前两个地址（如果“pageSize”=2），当我单击分页控件时，没有任何更改。只有“currentPage”（在我的例子中是p）的值改变

如果我检查我的公司对象，它将填充该公司的所有现有地址，但我不会让它们不高兴

我做错了什么

如果我更改了“itmesPerPage”，我可以显示所有退出地址的数量——这就是全部

对于测试，我使用了“拼接管”，但效果相同。我只能显示第一个地址，而不能显示（例如）最后一个地址

如果我在视图中“检查”我的元素并单击控件，则可以识别页面更改，但没有任何更改

这是我的“公司详细信息组件”，用于创建抽象控件并从服务器加载数据：

恩戈尼尼特（）{

}

}

}

视图的相关部分，魔法应该发生在哪里：

<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>

街道
Zip-城市-地区
国家
{{p}

我是新来的，任何帮助都将不胜感激

非常感谢

---

Tom

在html模板中，当你对联系人地址进行分页时，你会得到索引

i

作为

[0,1]，[0,1]

等等。但角度形式索引仍在继续

[0,1,2,3,4…n]

。这可能就是问题所在

创建一个动态生成索引的函数，例如

generateIndex（i）

，该函数返回

i+pageSize*pageIndex

我也有同样的问题。 表单控件未更新，因为等于i的formGroupName在不同页面上始终相同。 对于第1页，索引为1和2， 对于第2页，同样是第1页和第2页。 这是因为我们在formArray的分页部分循环。为了解决这个问题，我创建了一个函数，该函数通过pageSize、currentPage和item索引创建索引

下一个想法是：

  fieldGlobalIndex(index) {
    return this.pageSize * (this.currentPage - 1) + index;
  }

然后，只需替换：

 [formGroupName]="i" -> [formGroupName]="fieldGlobalIndex(i)"

希望这会有所帮助

<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>

  fieldGlobalIndex(index) {
    return this.pageSize * (this.currentPage - 1) + index;
  }

 [formGroupName]="i" -> [formGroupName]="fieldGlobalIndex(i)"