尝试将img [src]值作为离子形式的一部分提交

我有一个个人资料图像,该图像是我在离子应用程序中从Firestore检索的。我正在尝试将此个人资料图片作为表单的一部分提交。 我正在通过profile.service接收数据。 profileImage显示在视图中,但是当我尝试提交图像的值时。图像在Firebase数据库中返回null,像这样

尝试将img [src]值作为离子形式的一部分提交

下面的代码是我尝试过的,但是返回空值。

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)
      )
    })
  }
usb333 回答:尝试将img [src]值作为离子形式的一部分提交

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/3159402.html

大家都在问