在Angular中访问当前DOM节点的子节点

Question

我的模板中有类似以下代码的内容

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

单击我要播放音频对象。所以我想要的是类似

的东西

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

或者也许

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

该按钮是循环的一部分，因此我试图避免使用ID，我只希望使用audo对象，该对象是当前按钮的子代。另外，我真的很想将其发送给函数，而不是直接播放。因此，实际代码将更像。

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

[据我所知，似乎没有一种方法可以将DOM节点作为“自身”或“此”来访问。我非常希望我只是缺少一些东西，并且有一种无需使用动态ID即可访问的方法。

Answer 1

那么，什么对我有用。在我的模板中

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