Как я могу динамически назначить шаблон ссылочной переменной в угловых

Question

Я использую дату совы и мне нужно динамически генерировать ссылочную переменную шаблона #id при использовании в ngFor

  <td>
  <div class="input-group">
  <input type="text" [(ngModel)]="trips.startDateTime" [max]="today" name="tripstartdate" 
     class="form-control form-control-sm"  [owlDateTimeTrigger]="dt4" [owlDateTime]="dt4">
  <owl-date-time #dt4 [hour12Timer]="true"></owl-date-time>
  </div>

  </td>
  <td>
  <div class="input-group">
  <input type="text" [(ngModel)]="trips.endDateTime" [min]="trips.startDateTime" 
     [max]="today" name="tripenddate" class="form-control form-control-sm" tabindex="5" [owlDateTimeTrigger]="dt3" [owlDateTime]="dt3">
   <owl-date-time #dt3 [hour12Timer]="true"></owl-date-time>
   </div>
   </td>
   <td>
   <input type="text" name='startOdoReading[{{i}}]' class="form-control form-control-sm" [(ngModel)]="trips.startOdoReading [value]=trips.startOdoReading />
   </td>

динамическое изменение # d4 и [owlDateTimeTrigger] = "dt4"

Спасибо

Answer 1

Вы можете сделать это в *ngFor, как вы делали в своем примере, потому что переменные ссылки на шаблон уже уникальны.Ниже приведен пример того, как вы можете сделать это:

<td *ngFor='let ex of example'>
 <div class="input-group">
   <input type="text" [(ngModel)]="trips.startDateTime" [max]="today" name="tripstartdate" 
     class="form-control form-control-sm"  [owlDateTimeTrigger]="dt4" 
     [owlDateTime]="dt4">
   <owl-date-time #dt4 [hour12Timer]="true"></owl-date-time>
 </div>
</td>

Или вы можете попробовать получить все ваши templateRef переменные из *ngFor, например, так:

@ViewChildren('dt4') dtTime: QueryList<TemplateRef>;

и сделатьитак:

<td *ngFor='let ex of example; let i = index'>
 <div class="input-group">
   <input type="text" [(ngModel)]="trips.startDateTime" [max]="today" name="tripstartdate" 
     class="form-control form-control-sm"  [owlDateTimeTrigger]="dt4" 
     [owlDateTime]="dtTime[i]">
   <owl-date-time #dt4 [hour12Timer]="true"></owl-date-time>
 </div>
</td>