ボタンをクリックして別の音声を再生する角度

Question

私は現在、一種のラジオ交換機を作っています。 サービス内にすべてのステーション情報があります。私は、コンポーネントを取得した後、htmlファイルのすべてをリストします。

ボタンをクリックすると、ステーションのURLが変数に格納され、オーディオsrcにロードされます。 このオーディオソースがロードされ、再生が開始されます。

1つのボタンにすべてを入れても問題はあります。最初のボタンで変数にurlをロードし、別の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：テンプレートの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

、あなたが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(); 
    } 

これがクリックされたオーディオトラックを再生します。