在按钮上点击不同的音频点击角度

Question

我目前正在制作一种无线电总机。 我有一个服务中的所有车站信息。在通过组件获取后，我会在html文件中列出所有内容。

在一个按钮上单击，站点URL将放入一个变量中，然后将其加载到音频src中。 该音频源已加载并开始播放。

我有一些问题，虽然把一切都放在1按钮。如果我先用1个按钮将变量加载到变量中，然后用另一个按钮激活，它就可以工作。 但是，当我试图把两个在1按钮，它似乎并没有刷新变量。

我的组件：

audio: any= new Audio(); 
    audios: any[]; 
    audiosource: string = ''; 

    //methods 
    GetStation() 
    { 
     console.log('works'); 
     this.audio.src = this.audiosource; 
     this.audio.load(); 
     this.audio.play(); 
    } 

    //constructor 
    constructor(private soundwaveService: SoundwaveService) 
    { 
     this.audios = soundwaveService.getStations(); 
    } 

我的HTML：

<div *ngFor="let audio of audios, let i = index"> 
    <div (click)="audiosource=audio.url"> 
     <button (click)="GetStation()">{{audio.station}}</button> 
    </div> 
</div> 
--- {{audiosource}} --- 

Answer 1

在你的HTML模板，通知你触发click()的GetStation()功能，但你不传递任何引用到audio你想要玩。此外，div上的(click)处理程序实际上是没有用的。

代码修改本：现在

<div *ngFor="let audio of audios, let i = index"> 
    <div> 
     <!--pass the audio you want to play in the click event's handler--> 
     <button (click)="GetStation(audio)">{{audio.station}}</button> 
    </div> 
</div> 

，在你的组件类：

GetStation(audio) 
    { 
     this.audio.src = audio.src; 
     this.audio.load(); 
     this.audio.play(); 
    } 

这将播放已被点击音轨。