如何动态地在angular中分配模板参考变量

时间:2018-09-20 18:24:57

标签: angular angular5

我正在使用猫头鹰日期时间,并且在ngFor中使用时需要动态生成#id模板参考变量

VACUUM tab_v;

SELECT * FROM pgstattuple('tab_v');
-[ RECORD 1 ]------+--------
table_len          | 4431872
tuple_count        | 60000
tuple_len          | 2268895
tuple_percent      | 51.19
dead_tuple_count   | 0
dead_tuple_len     | 0
dead_tuple_percent | 0
free_space         | 1616724
free_percent       | 36.48

动态变化#d4和[owlDateTimeTrigger] =“ dt4”

谢谢

1 个答案:

答案 0 :(得分:0)

您可以像在示例中一样在*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>