0

我正在使用带角度的wavesurfer，我试图将波形容器放在带有*ngIf和*ngFor的html标签块中，当我运行项目时，角度给了我这样的错误消息“找不到容器元素” . 我现在想要做的是将波形容器放在该 html 代码块中但仍然可以播放音频的方法。更多信息（我提到的 html 代码块是音频播放器中的元素，如专辑封面、歌曲名称、艺术家姓名，由从 GET 服务获取数据的数据列表的 *ngFor 呈现）。

我试图将容器移到代码块之外，一切正常，但我想要在这些代码块内运行

这是 wavesurfer 的容器：

<div id="waveform"></div>

这是我想要围绕它的代码块：

<ng-container *ngIf="playlist">
<div id="waveform"></div>
<div class="coverAll" flexLayout="column">
    <div class="upperPart" flexLayout="row" style="background-image: url(https://images.genius.com/225d8b51efbfa327ed66d35898468855.1000x1000x1.jpg) blur">
        <div class="albumArt" fxFlex="30">
            <img src="https://static.tumblr.com/exbflx8/z13m20ek0/cover.png" alt="Smiley face" height="270px" width="100%">
        </div>
        <div class="space" fxFlex="2"></div>
        <div class="rightPart" fxFlex="70">
            <div class="songInfo">
                <h1>{{playlist.playlistName}}</h1>
                <ng-container *ngIf="currentSongName">
                    <h4>Now playing : {{currentSongName}}</h4>
                </ng-container>
            </div>
            <button (click)="play()">Play</button>
            <img *ngIf="waveform" src={{waveform}}>
            <div class="audioPlayer">
                <audio src="{{currentSongURL}}" controls style="width: 98%">
                </audio>
            </div>
        </div>
    </div>
    <div *ngFor="let song of playlist.songs" class="lowerPart">
        <a style="text-decoration:none">
            <div class="songChoosing" flexLayout=column style="border-bottom-style:inset;">    
                <div class="songMember" flexLayout="row">
                    <a (click)="changeSong(song)">
                        <div class="coverHolder" fxFlex="5">
                            <img src="{{song.songCoverArt}}" alt="Smiley face" height="28" width="35" class="miniCover">
                        </div>
                        <div class="miniSongNameHolder" fxFlex="75">
                            <p class="miniSongName">{{song.songName}}</p>
                        </div>
                    </a>
                </div>
            </div>
        </a>
    </div>
</div>
</ng-container>

我是角度的新手，我希望你们能帮助克服这个问题！谢了！

4

0 回答 0