Javascript 用于内部组计数的角度4嵌套formGroup数组重置计数器

我有一个段（id、时间），可以有一个或几个人（角色、信息）。该字段是动态生成的。在为每个片段生成几个人之后，我注意到，在创建每个片段时，人的索引不会重新启动。当我要删除某个人时，所选的人不是已删除的人。
因此，我：

segment 1   
-----person 1  (index = 0)    
--segment 2   
-----person 1  (index = 1)     
-----person 2  (index = 2)  
-----person 3  (index = 3)       
--segment 3   
-----person 1  (index = 4)     
-----person 2  (index = 5)    

如何重置人员计数器，以便删除所选人员。如何获得正确的索引，如：
第1部分

-----person 1  (index = 0)    
--segment 2   
-----person 1  (index = 0)     
-----person 2  (index = 1)  
-----person 3  (index = 2)       
--segment 3   
-----person 1  (index = 1)     
-----person 2  (index = 2)  

下面是我的.html代码

<div formArrayName="segmentRows3">
          <div *ngFor=" let segmentRow of mySummaryForm.controls.segmentRows3.controls; let i=index " > 
            <div  class="form-group" [formGroupName]="i" >  
                <label for="segmentId3">Segment ID
                    <input type="text" formControlName="segmentId3" id="segmentId3" class="form-control" value="{{i+1}}" [attr.disabled]="true" required >          
                </label>   <br> 
                <label for="segmentTime3">Segment time : </label> {{mySummaryForm.value.segmentTime3 | json}}<br>
                <p-calendar formControlName="segmentTime3" showTime="true" hourFormat="24" [utc]="false" timeOnly="true" type="text" id="segmentTime3" placeholder="select a time" (ngModelChange)="onChange($event)" (onSelect)="onSelect($event)" required></p-calendar>         

                <label><span *ngIf="mySummaryForm.controls.segmentRows3.controls.length > 1" (click)="deleteSegment(i)" class="btn btn-danger">Remove segment</span></label>                    
                <button type="button" (click)="addPerson(i)" class="btn btn-info">Add a person</button>
                <div formArrayName="personRows3">
                    <div *ngFor=" let personRow of segmentRow.controls.personRows3.controls; let j=index " >
                        <div  class="form-group" [formGroupName]="j" >   #{{j+1}}   
                                <label for="personR3">person Role 
                                <input formControlName="personR3" [typeahead]="personRole" [typeaheadOptionsLimit]="10" [typeaheadMinLength]="0" type="text" id="personR3" class="form-control" placeholder="select a role" (ngModelChange)="onChange($event)" required>
                                </label>
                                <label for="personI3">Person infos
                                <input formControlName="personI3" [typeahead]="states" [typeaheadOptionsLimit]="10" [typeaheadMinLength]="0" type="text" id="personI3" class="form-control" placeholder="select infos" (ngModelChange)="onChange($event)" required>
                                </label>                                    
                                <label><span *ngIf="segmentRow.controls.personRows3.controls.length > 1" (click)="deletePerson(i, j)" class="btn btn-warning">Remove</span></label>
                        </div>                  
                    </div>
                </div>
                <label for="topic">Topic</label>
                <textarea formControlName="topic" id="topic" class="form-control" (ngModelChange)="onChange($event)" required></textarea>  
            </div>            
          </div>
        </div>
        <button type="button" (click)="addSegment(i)" class="btn btn-primary">Add a segment</button>    

段ID


段时间：{mySummaryForm.value.segmentTime3|json}

删除段
添加一个人
#{{j+1}}
个人角色
个人信息
去除
话题
添加一段

这是我的.ts代码

addPerson(index: number) {
    let personRows3 = <FormArray>this.mySummaryForm.get(`segmentRows3.${index}.personRows3`)
    if(personRows3){
        personRows3.push(this.fb.group({
            personR3: '',
            personI3: ''
        }));
     }
}

deletePerson(indexSeg: number, indexPers: number) {    
    let personRows3 = <FormArray>this.mySummaryForm.get(`segmentRows3.${index}.personRows3`); 
    if(personRows3){
        personRows3.removeAt(indexPers);
    }
}

addSegment(index: number) {
    let segmentRows3 = <FormArray>this.mySummaryForm.get('segmentRows3');
    if(segmentRows3){
        segmentRows3.push(
            this.fb.group({
                segmentTime3: '',
                segmentId3: '',
                topic: '',              
                personRows3: this.fb.array([
                this.fb.group({
                   personR3: '',
                   personI3: ''
                  })
                ])
            })
        );
    }
}

addPerson（索引：编号）{
让personRows3=this.mySummaryForm.get（`segmentRows3.${index}.personRows3`）
if（人员3）{
人员3.推（this.fb.group({
人3:“，
人物3:'
}));
}
}
deletePerson（indexSeg:number，indexPers:number）{
让personRows3=this.mySummaryForm.get（`segmentRows3.${index}.personRows3`）；
if（人员3）{
人员3.移除（indexPers）；
}
}
addSegment（索引：编号）{
让segmentRows3=this.mySummaryForm.get（'segmentRows3'）；
如果（第3行）{
推(
本集团({
分段时间3:“”，
段ID3:“”，
主题：“”，
personRows3:this.fb.array([
本集团({
人3:“，
人物3:'
})
])
})
);
}
}

我想您可以使用定制的数据索引属性来实现。通过链接中提到的答案中的一个示例，可以更清楚地解释这一点

---

问题在于删除功能，而不是模板。该模板为我提供了该人员的正确索引。但当我删除它时，它似乎看到了一个包含所有人的片段。在deletePerson中，你必须传递两个参数，当你回答时，我和JJ正在测试它。谢谢我的deletePerson中缺少indexPers。