首页 > 解决方案 > Firestore 文档上传后无法路由到仪表板

问题描述

我正在尝试将音频文件上传到 firebase 存储,并在 firestore 数据库中上传有关音频文件的文档数据。操作顺序是录制音频-->将音频文件放入firebase存储-->提交表单数据到firestore数据库和router.navigate到[/dashboard]。一切正常,但无法完成最后一步,即无法导航到 [/dashboard]。下面是代码

.ts 文件

submitData(form:NgForm) {
    const autoId = this.afs.createId();
    const audioRef: AngularFirestoreDocument<any> = this.afs.doc(`audiofiles/${autoId}`);
    var user = firebase.auth().currentUser;
    var uid = user.uid;

    var file = this.blob;
    var name = uid + "_" + autoId + ".wav";
    var storageRef = firebase.storage().ref();
    var audioRef = storageRef.child('raw-audio');
    var audioImagesRef = audioRef.child(name);

    audioImagesRef.put(file).then(function (snapshot) {

      var storyTime = firebase.firestore.Timestamp.fromDate(new Date());
      snapshot.ref.getDownloadURL().then(function (rawFileURL) {

        let storyData: Story = {
          rawfilepath: rawFileURL,
          username: form.value.username,
          audiotitle: form.value.audiotitle,
          userid: uid,
          time: audioTime,
        }

          audioRef.set(audioData)
          .then(
            res => {
              this.router.navigate(['/dashboard']);
            },
            err => {
              console.log(err);
            }
          )
        
      });
     });
  }

我收到以下错误

错误:未捕获(承诺中):TypeError:无法读取未定义的属性“路由器”

如果有人可以帮助导航到 [/dashboard],我将不胜感激。提前感谢您的时间。

标签: javascriptangularfirebasegoogle-cloud-firestore

解决方案


您可能希望使用箭头函数而不是function关键字,以避免this在其范围内重新定义:

audioImagesRef.put(file).then(snapshot => {
snapshot.ref.getDownloadURL().then(rawFileURL => {

推荐阅读