角反应式-FormArray从另一个索引开始

问题描述

我有一个发票模板，如果服务字段不再适合第一页，我想从第二页的另一个索引开始。例如，如果在第一页上创建了12个服务字段，则请在第二页上添加一个新的服务对象（第13个元素）。现在，它在第二页上显示了formArray中的第一个元素。我将反应形式与formArray一起使用。

请查看我在Stackblitz上的代码： https://stackblitz.com/edit/angular-invoice?file=src/app/app.component.html

我已经为第二页创建了模板，并在随后的页面中创建了另一个模板：

<ng-template #sndPage>
        <div id="{{ i+1 }}" class="page">
            <div class="content">
                <div resizeObserver (resize)="onResize($event)">
                    <h1>Another Page</h1>
                    <form [formGroup]="invoiceForm" (ngSubmit)="onSubmit()">
                        <div class="service-table" formArrayName="services">
                            <ng-container 
                                *ngFor="let service of services.controls | slice:13; let j = index;" <- How to change the start index?
                                [formGroupName]="j" 
                            >
                            <div id="service" *ngIf="page.growth; else elseBlock" >   
                                
                                <div class="pos">Pos.: {{page.start + j+1}} </div>
                                <textarea 
                                    class="title"
                                    formControlName="title"

                                    autosize
                                    [minRows]="1"

                                    placeholder="Caption2"
                                >
                                </textarea>
                                <textarea 
                                    class="detail"
                                    formControlName="detail"

                                    autosize
                                    [minRows]="1"

                                    placeholder="Describe2"

                                >
                                </textarea>
                                <div class="price">
                                    <input
                                        class="price"
                                        formControlName="price"
                                        AutoSizeInput
                                        placeholder="Price"
                                    >
                                </div>
                            </div>
                            <ng-template #elseBlock>
                                <div id="service" *ngIf="page.start + j < page.lastServiceElement">   
                                
                                    <div class="pos">Pos.: {{page.start + j+1}}</div>
                                    <textarea 
                                        class="title"
                                        formControlName="title"

                                        autosize
                                        [minRows]="1"

                                        placeholder="caption2"
                                    >
                                    </textarea>
                                    <textarea 
                                        class="detail"
                                        formControlName="detail"

                                        autosize
                                        [minRows]="1"

                                        placeholder="Describe2"

                                    >
                                    </textarea>
                                    <div class="price">
                                        <input
                                            class="price"
                                            formControlName="price"
                                            AutoSizeInput
                                            placeholder="Price"
                                        >
                                    </div>
                                </div>
                            </ng-template>
                        </ng-container>
                        <button mat-icon-button type="button" color="accent" *ngIf="page.growth" (click)="addService()"> 
                            <mat-icon>add_circle_outline</mat-icon>
                        </button>
                        </div>
                        <button type="submit" [disabled]="!invoiceForm.valid">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </ng-template>

我还猜想切片管道不适用于formArray。我将数字（13）设置为仅用于测试。

奖金：如果第一页上的“最后一个”服务描述字段不适合，是否有很好的方法继续下一页的描述字段？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）