Html 我的div元素加载是否过快？有棱角的

我有一个媒体播放器库，ngx音频播放器，我正在为它递归生成播放列表。如果我将播放列表硬编码到声明中，一切正常，但这对我的目的不可行

当我动态创建播放列表时，我得到“无法读取未定义的属性'title'”

当它试图获得第一首歌的标题时可能说明的是，在错误开始出现之前，阵列的my console.log没有显示。 我知道就类型和格式而言，一切都应该工作，因为当我硬编码它时，它就工作了。我想我的html可能正在填充数组之前读取数组？也许有人可以推荐一种方法来证实这一点，如果是的话，修复它？除非我的推理是错误的

我的html：

<div class="container" id="BobDiv">
  <mat-advanced-audio-player [playlist]="msaapPlaylist" [displayTitle]="msaapDisplayTitle"
  [displayPlaylist]="msaapDisplayPlayList" [pageSizeOptions]="msaapPageSizeOptions"
      [displayVolumeControls]="msaapDisplayVolumeControls" [expanded]="true"></mat-advanced-audio-player>
</div>

音乐数据来源：

  parseMusic(data: any) {
    const timeRegex = /^(\d+):(\d+)$/;
    for (let song of data) {
      let matchsong = song.length.match(timeRegex);
      let secondsTotal = (parseInt(matchsong[1], 10) * 60) + parseInt(matchsong[2], 10);
      song.totalSeconds = secondsTotal;
    }
    this.musicData = data;
  }

---

可能是您从json文件中获取数据的时间延迟很小，所以在呈现mat advanced audio player组件之前，请添加以检查是否获取了数据

组件。ts

isDataLoaded = false;

 this.http.get(url).subscribe( (data: any) => { 
  this.parseMusic(data);
  this.isDataLoaded = true;
 });

component.html

<div class="container" *ngIf="isDataLoaded" id="BobDiv">
  <mat-advanced-audio-player [playlist]="msaapPlaylist" [displayTitle]="msaapDisplayTitle"
  [displayPlaylist]="msaapDisplayPlayList" [pageSizeOptions]="msaapPageSizeOptions"
      [displayVolumeControls]="msaapDisplayVolumeControls" [expanded]="true"></mat-advanced-audio-player>
</div>

您可以分享将数据添加到MSAAppayList的代码吗？添加了该函数。您如何获取musicData？再次编辑，该函数在Ngoninit之前执行。另外，该函数还包括：let url:string=“assets/musicData.json”；this.http.get（url）.subscribe（（数据：any）=>{this.parseMusic（数据）；}）；恩戈尼尼特之后

<div class="container" *ngIf="isDataLoaded" id="BobDiv">
  <mat-advanced-audio-player [playlist]="msaapPlaylist" [displayTitle]="msaapDisplayTitle"
  [displayPlaylist]="msaapDisplayPlayList" [pageSizeOptions]="msaapPageSizeOptions"
      [displayVolumeControls]="msaapDisplayVolumeControls" [expanded]="true"></mat-advanced-audio-player>
</div>