时间戳

首页 > 解决方案 > 如何将动态点击事件绑定到 *ngFor 中的动态模板 ref/var？

angular - 如何将动态点击事件绑定到 *ngFor 中的动态模板 ref/var？

问题描述

如何动态地将模板引用/变量添加到文件输入以及绑定该按钮的单击事件。

我检查了许多其他我不理解的堆栈问题，因为没有完整或正确的答案。

所以，我决定提出我自己的问题。请帮我解决这个问题。

提前致谢 ：）

我的代码看起来像这样

<div *ngFor="let image of resBgImgProps; let i = index">
   <input (change)="bgImg($event)" type="file" accept="image/*" #??? />
   <button (click)='???.click()'>Select</button> 
</div>

标签： angulartypescript

解决方案

您不需要模板引用变量的动态名称；您可以使用固定名称。循环的每次迭代ngFor都会有它自己的变量实例。以下是您将如何使用该名称#fileInput：

<div *ngFor="let image of resBgImgProps; let i = index">
   <input #fileInput (change)="bgImg($event)" type="file" accept="image/*" />
   <button (click)="fileInput.click()">Select</button> 
</div>

推荐阅读