Question

我要做什么： 我正在构建一个Angular表单，可以在其中添加项目名称，描述，图像，链接并提交以将信息保存在Firebase中。然后在另一个组件中提取该信息并显示在页面上。

我能做什么： 我可以将图像上传到Firebase存储并提交ProjectName，Description并链接到数据库，但是在将图像URL保存在数据库中时遇到问题。

我遇到的问题：上传图像后，我想获取它的url并将其添加到Project Link输入字段中，然后提交到数据库以将其与其他字段一起保存。这就是我遇到的问题，上传图片后，我无法将其值添加到输入中。我尝试将其与[value] =“ url”绑定，但是除非删除name =“ image”，否则该方法无效。在这种情况下，我会在字段中获取图像url值，但会出错。

Form Error img

这是我的component.html文件

 <div class="card-body">
 <form #projectForm="ngForm" (ngSubmit)="onSubmit(projectForm)">  



   //UPLOAD IMAGE AND ADD THE URL TO INPUT

    <div *ngIf="(snapshot | async) as snap">
    {{ snap.bytesTransferred | fileSize }} of {{ snap.totalBytes | fileSize }} 


    <div *ngIf="downloadURL | async as url">
    <h3>Results!</h3>
    <img width="150px" #var height="auto" [src]="url"><br>    
    <div class="form-group">
        <label for="image">Project Link</label><br>
        <input 
          [value]="url"
          name="image"
          #projectImage="ngModel"
          class="form-control"
          [ngClass]="{'is-invalid':projectImage.errors && projectImage.touched}"
          [(ngModel)]="project.image"
          minlength="2"
          required
          readonly
        >
      </div>
    </div> 
    <hr>

    </div>


        <input type="submit" value="Submit" class="btn btn-primary btn-block">
</form>
</div>
</div>

这是我的component.ts文件

 import { Component, OnInit, ViewChild } from 
 '@angular/core';
import { Project } from '../../models/Project';
import { HttpClient } from '@angular/common/http';
import { FlashMessagesService } from 'angular2-flash-messages';
import { UserService } from '../../services/user.service';
import { AngularFireStorage, AngularFireUploadTask } from 'angularfire2/storage';
import { AngularFirestore } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';
import { tap } from 'rxjs/operators';
import { finalize } from 'rxjs/operators';

@Component({
  selector: 'app-add-project',
  templateUrl: './add-project.component.html',
  styleUrls: ['./add-project.component.scss']
})
export class AddProjectComponent implements OnInit { 
  project: Project = {
    projName: '',
    description: '',
    image: '',
    link: ''
    }
  @ViewChild('projectForm') form: any;  
  constructor(
    private flashMessage: FlashMessagesService,
    private userService: UserService,
    private storage: AngularFireStorage, 
    private db: AngularFirestore
  ) { }

  ngOnInit() {
  }



 // Download URL
 downloadURL: Observable<string>;




// The file's download URL
this.snapshot.pipe(finalize(() => this.downloadURL = this.storage.ref(path).getDownloadURL())).subscribe();
}

如何添加Firebase图像URL以输入并提交到数据库

0 个答案: