Wavesurfer.js无法识别波形容器

Question

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

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

这是waveurfer的容器：

<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>

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