javascript - 如何在 Angular 中为按钮单击事件使用输入元素的 id

Question

我有一个模板

<input class="ng-hide"  id="{{f}}" multiple type="file" style="display:none;"
(change)="getFiles($event)" />
<button mat-raised-button type="button" class="mat-raised" color="primary"
onclick="document.getElementById('{{f}}').click()">{{f}}</button>

这里 f 是一个具有动态值的字符串变量，并且想要传递相同的onclick函数，但我收到错误

error NG8002: Can't bind to 'onclick' since it isn't a known property of 'button'.

4     onclick="document.getElementById('{{f}}').click()">{{f}}</button>

如何解决这个问题。我正在使用Angular 9.

标签： javascripthtmlangularangular9

Answer 1

而不是document.getElementById()你可以使用 Angular模板引用变量。除了提供更多功能之外，它还是 Angulary 的做事方式。同样在 Angular 中，您需要绑定到(click)事件而不是onclick事件。尝试以下

<input #inputFile class="ng-hide" multiple type="file" style="display:none;"
(change)="getFiles($event)" />

<button mat-raised-button type="button" class="mat-raised" color="primary"
(click)="inputFile.click()">{{f}}</button>

这inputFile是模板引用变量。