Question

我正在尝试做什么

我正在关注如何上传图片的Firebase视频。

问题

我相信教程JavaScript是在HTML文档中的脚本标记内编写的。

我正在使用Angular，我认为TypeScript在某些语法上有点严格，我不完全确定如何绕过它。

问题

如何解决这个问题：'Uploader.value'会抛出以下错误？

[ts]'HTMLElement'
类型中不存在属性'value'

到目前为止，我的代码如下：

import { Component, OnInit } from '@angular/core';
import * as firebase from 'firebase/app';
import { AuthService } from '../auth.service';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-projects-add',
  templateUrl: './photos-add.component.html',
  styleUrls: ['./photos-add.component.css']
})

export class PhotosAddComponent implements OnInit {

  projectDetails: FormGroup;
  currentRoute: string = this.router.url;
  userId;

  constructor(
    private authService: AuthService,
    private activeRoute: ActivatedRoute,
    private router: Router
  ) { 
     this.authService.user.subscribe(user => {
      if (user) {
        this.userId = user.uid;
      } else {
        console.log('not signed in');
      }
    });
  }

  ngOnInit(): void {

    // Get Upload Elements
    var uploader = document.getElementById('uploader'); 
    // var fileButton = document.getElementById('fileButton');

    var fileButton = (<HTMLInputElement>document.getElementById('fileButton'));

    // Listen for file selection
    fileButton.addEventListener('change', function (e) {

      // Get File
      var file = (<HTMLInputElement>e.target).files[0];

      // Create a storage Ref
      var storageRef = firebase.storage().ref('photos/' + file.name);

      // Upload File
      var task = storageRef.put(file);

      // Upload Progress Bar
      task.on('state_changed',

      function progress(snapshot) {
          var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
          uploader.value = percentage;
          console.log('uploader value is = ' + uploader);
          console.log('file name is = ' + file.name);
      },

      function error(err) {

      },

      function complete() {
      })
    });
  }
}

这里的任何帮助都将受到广泛赞赏：）

Answer 1

Angular的做法是

HTML ：

将#uploader添加到元素标记中;

<强>打字稿：

而不是

var uploader = document.getElementById('uploader');

这样做：

  @ViewChild('uploader') private uploader;

之后你可以用它作为：

  this.updatedTask.nativeElement.value=percentage; ..etc

Angular2 + Firebase - 上传图片 - [ts]'HTMLElement'类型中不存在属性'value'。任何

1 个答案: