Question

我正在为学校制作测验应用程序。我已经制作了一个表格，您可以在其中创建问题。看起来像这样：https://prnt.sc/prkm74
在红色正方形中，您可以看到从数据库中检索到的问题数据，此处的图像目前已进行硬编码。

我不知道如何使文件选择器工作以将图像上传到存储，然后（我认为）随后必须将其链接到数据库中的问题。

这是我用来从数据库检索数据的代码。

<div class="row">
            <div class="col-md-6">
            <img  src="../../../assets/traffic.jpg" class="card-img">
            </div>
            <div class="col-md-6">
            <div class="card-body">
                <p class="card-text">A. {{ question.payload.doc.data().option1 }}</p>
                <p class="card-text">B. {{ question.payload.doc.data().option2 }}</p>
                <p class="card-text">C. {{ question.payload.doc.data().option3 }}</p>
                <p class="card-text">Answer: {{ question.payload.doc.data().answer }} </p>
            </div>
            </div>
        </div>

这是ts文件中上传按钮使用的代码

create() {
    let data = this.questionForm.value;
    this.questionService.createQuestion(data)
       .then(res => {
         console.log("back at questions")
       });
       this.resetForm();
  }

这是问题服务：

import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';

@Injectable({
  providedIn: 'root'
})
export class QuestionService {

  constructor(private firestore: AngularFirestore) { }



  createQuestion(data) {
    return new Promise<any>((resolve, reject) =>{
        this.firestore
            .collection("Questions")
            .add(data)
            .then(res => {console.log(res); resolve();}, err => reject(err));
    });
  }

  getQuestions() { 
    return this.firestore.collection("Questions").snapshotChanges();
  }

  update(question) {
    return this.firestore.collection("Questions").doc(question.payload.doc.id).set({ completed: true }, { merge: true });
  }

  delete(question) {
    return this.firestore.collection("Questions").doc(question.payload.doc.id).delete();
  }

}

我希望上传按钮将图像添加到数据库中，并将其链接到表单中其余的已填充数据，因此我基本上可以使用{{question.payload.doc.data（）。imageUrl }}例如

将图像上传到存储并将其添加到数据库并检索它们

0 个答案: