在小程序的一个组件Component中，获取全局变量app.globalData，赋值了数据也能console.log输出，但是在页面上显示不出来？？

页面上
<text>{{musicPlayerInfo.nowPlayingSong.name}}</text>

js文件
// components/musicPlayer/musicPlayer.js
// 获取全部变量
const app = getApp()
Component({
  /**
   * 组件的属性列表
   */
  properties: {


  },


  /**
   * 组件的初始数据
   */
  data: {
    // 全局变量中的音乐播放器组件的相关属性参数
    musicPlayerInfo: {},
  },



  // 组件的生命周期函数
  ready: function () {
    this.setData({
      musicPlayerInfo: app.globalData,
      nowPlayingSong: app.globalData.nowPlayingSong,
      playingSongList: app.globalData.playingSongList
    })
  },
  methods: {
    test() {
      // app.globalData有数据，可以播放暂停，上一首下一首
      console.log(app.globalData)
      console.log(this.data.musicPlayerInfo)
      // console.log(musicPlayerInfo)
    },
    // 播放上一首音乐
    playPrevSong() {


    },
    // 播放/暂停音乐
    playOrpauseSong() {
      wx.getBackgroundAudioPlayerState({
        success (res) {
          console.log(res)
          // 播放中
          if(res.status == 1) {
            app.globalData.backgroundAudioManager.pause()
          } else if (res.status == 0) {
            app.globalData.backgroundAudioManager.play()
          } else {
            // 提示当前播放列表中还没有添加歌曲
          }
        }
      })
    },
    // 播放下一首音乐
    playNextSong() {
      
    },
    getMusicPlayerData() {
      this.setData({
        musicPlayerInfo: app.globalData
      })
    }
  }
})