【问题标题】:Unable to route to dashboard after firestore doc uploadFirestore 文档上传后无法路由到仪表板
【发布时间】:2020-11-07 13:33:27
【问题描述】:

我正在尝试将音频文件上传到 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],我将不胜感激。提前感谢您的时间。

【问题讨论】:

    标签: javascript angular firebase google-cloud-firestore


    【解决方案1】:

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

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

    【讨论】:

    • 可爱!谢谢道格。这两个变化就像一个魅力。我知道我应该开始另一个线程,但既然现在你已经知道代码,如果我必须在导航之前添加一个引导进度条它会放在哪里?如果你想让我为这个问题创建一个单独的线程,我可以。再次非常感谢。
    • 请针对新问题发布一个单独的问题。
    猜你喜欢
    • 1970-01-01
    • 2016-12-18
    • 1970-01-01
    • 2018-12-05
    • 2018-09-01
    • 1970-01-01
    • 2016-10-30
    • 2022-11-29
    • 2021-05-07
    相关资源
    最近更新 更多