如何在 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.

Answer 1

您可以使用 Angular template reference variable 而不是 document.getElementById()。除了提供更多功能外，它还是 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是模板引用变量

如何在 Angular 中将输入元素的 id 用于按钮单击事件

How to use id of an input element for a button click event in Angular

html

javascript

angular

angular9