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

Я использую ngb timepicker внутри цикла ngFor.

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};
}

}

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


angular timepicker ngmodel
person rupnarayan    schedule 09.01.2020    source источник
comment
Проверьте это: stackoverflow .com/questions/48870514/   -  person Prashant Pimpale    schedule 09.01.2020
comment
Не работает в моем случае.   -  person rupnarayan    schedule 09.01.2020
comment
Решена проблема ‹ngb-timepicker [attr.id]='time'+i [attr.name]='time'+i [(ngModel)]=time[i] formControlName=startTime #stTime [meridian]=meridian ( click)=convertTiming(time[i].hour,time[i].minute, i, 'stTime', $event)›‹/ngb-timepicker›   -  person rupnarayan    schedule 09.01.2020

Ответы (1)


arrow_upward
0
arrow_downward

Если ваша цель состояла в том, чтобы иметь несколько ngModels (по одной для каждого таймпикера), вы могли бы использовать массив времен: 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>
person Matheus Cassol    schedule 09.01.2020
comment
Именно так я решил проблему двумя днями ранее. - person rupnarayan; 11.01.2020