Как использовать id элемента ввода для события нажатия кнопки в Angular

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 - строковая переменная со значением c Dynami, и я хочу передать ту же функцию 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

Вместо 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 - это ссылочная переменная шаблона.