0

我有一个可以有一个或几个人（角色，信息）的段（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>

这是我的 .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: ''
                  })
                ])
            })
        );
    }
}
4

1 回答 1

0

我猜你可以使用自定义的data-index属性来实现。在链接中提到的答案中通过示例更清楚地解释了它。

数据索引示例

于 2018-05-04T08:09:31.133 回答