2017-08-21 12 views
2

私はAngular2とFirebaseを使ってプロジェクトを進めています。Firebase Storageに画像をアップロードしたいと思います。AngularFire2を使用してファイルをFirebase Storageにアップロード

したがって、コンストラクタと関数、そしてテンプレートを使用してComponentを作成しました。私は変数firebaseApp、public firebaseApp: FirebaseApp;を宣言する方法が正しいかどうかはわかりません。

import { Component, OnInit, Inject, Input } from '@angular/core'; 
import {AngularFireDatabase, FirebaseListObservable} from 'angularfire2/database'; 
import { MdDialog, MdDialogRef, MD_DIALOG_DATA, MdButton } from '@angular/material'; 
import { Http, Headers, Response } from '@angular/http'; 
import {Observable} from 'rxjs/Rx'; 
import { FormBuilder, FormGroup } from '@angular/forms'; 
import { FirebaseApp } from 'angularfire2'; 
import 'firebase/storage'; 

@Component({ 
    selector: 'individual-chat', 
    templateUrl: './chat.component.html', 
    styleUrls: ['./chat.component.css'] 
}) 

export class IndividualChat implements OnInit { 
    public firebaseApp: FirebaseApp; 
constructor(
    firebaseApp: FirebaseApp, 
    public afAuth: AngularFireAuth, 
    public af: AngularFireDatabase, 
    public http: Http, 
    public dialog: MdDialog 
){ } 

    EditChatData(){ 
     this.af.object('groupConversations/'+ this.my_id + '/' +this.conversation_id).update({ groupName: this.group_edit_data.name ? this.group_edit_data.name : 'New Group' });   

    } 
    onChange(files) { 
    console.log(files, files[0]); 
     let storageRef = this.firebaseApp.storage().ref().child('groupImages'); 

     storageRef.put(files[0]).then(snapshot => { 
     console.log('successfully added');   
     }).catch(err => { console.error("Whoupsss!", err) }) 
    } 
    ... 
} 

そして、私は私のテンプレートで作成したフォームは、次のようになります:

だから、私のコンポーネントでは、私が持っている

ERROR TypeError: Cannot read property 'storage' of undefined 
:私はこのエラーを得続ける

<form name="form" (ngSubmit)="EditChatData()" enctype="multipart/form-data"> 
    <input type="file" #file (change)="onChange(file.files)" /> 
    <input type="text" placeholder="Group name" name="name" [(ngModel)]="group_edit_data.name" #name="ngModel" class="form-control" value=" {{ group_name }}" /> 
    <button class="btn">DONE</button> 
</form> 

そして、私のonChange(ファイル)内のconsole.logはこのオブジェクトを返します:

FileList {0: File, length: 1} 
length: 1, 
0: File { 
lastModified: 1503324156295 
lastModifiedDate: Mon Aug 21 2017 17:02:36 GMT+0300 (EEST), 
name:"Screenshot from 2017-08-21 17-02-36.png", 
size: 401442, 
type: "image/png", 
webkitRelativePath: "" 
} 

答えて

3

Cannot read property 'storage' of undefinedは、this.firebaseAppundefinedであることを示しています。あなたは、コンストラクタでそれを初期化することができます

、この方法:

constructor(
    firebaseApp: FirebaseApp, 
    public afAuth: AngularFireAuth, 
    public af: AngularFireDatabase, 
    public http: Http, 
    public dialog: MdDialog 
) { 
    this.firebaseApp = firebaseApp; 
} 
関連する問題