我有一个个人资料图像,该图像是我在离子应用程序中从Firestore检索的。我正在尝试将此个人资料图片作为表单的一部分提交。 我正在通过profile.service接收数据。 profileImage显示在视图中,但是当我尝试提交图像的值时。图像在Firebase数据库中返回null,像这样
下面的代码是我尝试过的,但是返回空值。
Tab1.html
<div id="form" *ngIf ="image.length > 0">
<form id ="ngForm" [formGroup]="validations_form" (ngSubmit)="onSubmit(validations_form.value)" novalidate>
<ion-item color="dark">
<ion-label position="floating">Say Something</ion-label>
<ion-input type="text" formControlName="description" color="light"></ion-input>
</ion-item>
<ion-item color="dark" *ngFor="let value of students">
<ion-label position="floating"></ion-label>
<ion-input type="text" formControlName="username" [(ngModel)]="value.username" color="light"></ion-input>
</ion-item>
<ion-button id="hiddenSubmitButton" class="submit-btn" expand="block" type="submit" color="medium-tint" form="ngForm" style="display: none;">Create</ion-button>
</form>
</div>
<div *ngFor="let value of students">
<img [src]= "value.profileImage">
</div>
Tab1.ts
export class Tab1Page implements OnInit {
profileImage : string;
username: any;
userBio: string;
userDetails: any;
isVisible = true;
item: any
validations_form: FormGroup;
image : any =[];
category: string;
students: {
id: string;
isEdit: boolean;
username: any;
userBio: any;
profileImage: any; }[];
constructor(
private imagePicker: ImagePicker,private formBuilder: FormBuilder,public actionSheetController: actionSheetController,private file: File,private profileService: ProfileService
) { }
ngOnInit() {
this.profileService.read_Students().subscribe(data => {
this.students = data.map(e => {
return {
id: e.payload.doc.id,isEdit: false,username: e.payload.doc.data()['username'],userBio: e.payload.doc.data()['userBio'],profileImage: e.payload.doc.data()['profileImage'],};
})
console.log(this.students);
});
}
resetfields() {
this.image = ["./assets/imgs/shane2.jpg"];
this.category ='';
this.validations_form = this.formBuilder.group({
description: new FormControl('',Validators.required),username: new FormControl(this.username,profileImage: new FormControl(this.profileImage)
// profileImage: new FormControl(this.profileImage)
});
}
newProject() {
this.category = 'Wipping';
console.log(this.category)
}
completeProject() {
this.category = 'Wipped';
console.log(this.category)
}
onSubmit(value){
let data = {
username : value.username || "",description: value.description,profileImage: value.profileImage,image: this.image,category: this.category
}
this.firebaseService.createtask(data)
.then(
res => {
this.router.navigate(["/tabs/tab4"]);
}
Firebase服务
import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import * as firebase from 'firebase/app';
import 'firebase/storage';
import { AngularFireAuth } from '@angular/fire/auth';
import 'firebase/firestore';
constructor(
public afs: AngularFirestore,public afAuth: AngularFireAuth
){}
createtask(value) {
return new Promise<any>((resolve,reject) => {
let currentUser = firebase.auth().currentUser;
this.afs.collection('tasks')
.add({
profileImage: value.profileImage,username: value.username,category: value.category,image: value.image,uid: currentUser.uid,date: new Date()
})
.then(
res => resolve(res),err => reject(err)
)
})
}