Timepicker ngb с [{ngModel}] внутри ngFor l oop, обновляющего все входы timepicker, так как все timepickers имеют одинаковую привязку ngmodel

Question

Я использую ngb timepicker внутри ngFor l oop.

Timepicker html выглядит следующим образом

<tr class="d-flex" *ngFor="let ct of workingTimingList.controls; let i = index; [formGroup]="ct" [attr.id]="'tr'+i">

<td>

<ngb-timepicker [attr.id]="'time'+i"  [attr.name]="'time'+i" [(ngModel)]="time"   formControlName="startTime"  #stTime [meridian]="meridian"  (click)="convertTiming(time.hour,time.minute, i, 'stTime', $event)"></ngb-timepicker>



</td>

</tr>

Мой файл .ts выглядит следующим образом

export class WorkingScheduleComponent implements OnInit {

time : any;

ngOnChanges() {
this.time = {hour:0 , minute:0};
}

}

Теперь, если l oop имеет более одной строки, создается несколько ngb-timepicker с одним и тем же [(ngModel)] = "time", и если я обновляю один timepicker с помощью [(ngModel) ] = "время" обновляется.

Answer 1

Если бы ваша цель состояла в том, чтобы иметь несколько ngModels (по одной для каждого таймера), вы могли бы go для массива раз: times: any[]

Тогда ваш html будет выглядеть так:

<tr class="d-flex" *ngFor="let ct of workingTimingList.controls; let i = index; [formGroup]="ct" [attr.id]="'tr'+i">
   <td>
   <ngb-timepicker [attr.id]="'time'+i"  [attr.name]="'time'+i" [(ngModel)]="times[i]"   
   formControlName="startTime"  #stTime [meridian]="meridian"  
   (click)="convertTiming(time.hour,time.minute, i, 'stTime', $event)"></ngb-timepicker>
   </td>
</tr>