Доступ к дочернему узлу текущего узла DOM в Angular

Question

У меня есть что-то вроде следующего кода в моем шаблоне

<button class="btn" >
  <audio src="mySourceFile.wav"></audio>
</button>

при нажатии. Я хочу воспроизвести аудио-объект. Так что я хотел бы что-то вроде

<button class="btn" (click)="this.audio.play()">

или, может быть,

<button class="btn" (click)="self.firstElementChild.play()">

Кнопка является частью al oop, поэтому я стараюсь избегать использования идентификатора Я просто хочу объект Audo, который является дочерним элементом текущей кнопки. Кроме того, я действительно хочу отправить его в функцию, а не воспроизводить его напрямую. Таким образом, фактический код будет больше похож.

<button *ngFor="let item of object | keyvalue" 
         class="btn" 
         id={{item.key}}
         (click)="myFunction(self.firstElementChild)"
  ><audio src={{item.value}}></audio>
</button>

Только насколько я могу судить, похоже, нет способа получить доступ к узлу DOM как "self" или "this". Я очень надеюсь, что мне чего-то не хватает, и есть способ получить доступ без использования динамических идентификаторов c.

Answer 1

Так, что работает для меня. В моем шаблоне

<button *ngFor="let item of object | keyvalue" 
         class="btn" 
         id={{item.key}}
         (click)="myFunction($event)"
  ><audio src={{item.value}}></audio>
</button>

В моем компоненте

 myFunction(event: Event){
    let audio = (event.target as Element).firstElementChild as HTMLAudioElement;
    audio.play();
  }