Question

我目前正在制作一种无线电交换机。我在服务中拥有所有的电台信息。我在通过组件后列出了html文件中的所有内容。

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

虽然把所有内容放在1个按钮中，但我遇到了一些问题。如果我首先使用1按钮加载变量中的url并使用另一个按钮激活，则它可以正常工作。但是当我尝试将两者放在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中，请注意您在GetStation()上触发click()功能，但您没有传递任何您想要播放的audio的引用。而且(click)上的div处理程序实际上没用。

将代码修改为：

<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();
    }

这将播放已单击的音轨。

在按钮上播放不同的音频点击Angular

1 个答案: