我有一个可以有一个或几个人(角色,信息)的段(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: ''
})
])
})
);
}
}