Question

This is the data stoed in firebase

             this.service.getQuiz().subscribe(actionArray => {
      this.list = actionArray.map(item => {
        return {
          id: item.payload.doc.id,
          ...item.payload.doc.data()
        } as Quiz;
      })
    });

Answer 1

我点击了此链接以生成Firebase项目

generate firebase project medium

按照上述网址操作后，您需要在角度应用程序中包含Firebase凭证。我在 environments 文件夹中创建了一个新文件（ environment.ts ），并将该文件导入app-module.ts中。如下所示。

environment.ts 在角度应用程序的 environments 文件夹中。

export const environment = {
   production: false,
   firebase : {
     apiKey: "XXXX",
     authDomain: "XXX",
     databaseURL: "XXXXX",
     projectId: "XXXXX",
     storageBucket: "",
     messagingSenderId: "XXXXX",
     appId: "XXXXXXX"
  }
};

app-module.ts 文件

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { environment } from '../environments/environment'; // firebase credentials
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { AngularFirestore } from 'angularfire2/firestore';

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import {FormsModule} from '@angular/forms';


import { HttpClientModule } from '@angular/common/http';






@NgModule({
 declarations: [
   AppComponent,
 ],
 imports: [
   BrowserModule,
   AngularFireModule.initializeApp(environment.firebase),
   AngularFireDatabaseModule,
   NgbModule,
   FormsModule,
   HttpClientModule,
  ],
  providers: [AngularFirestore],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-component.ts 文件

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import {NgbDateStruct, NgbCalendar} from '@ng-bootstrap/ng-bootstrap';
import { HttpClient } from '@angular/common/http';



// adding **Question** model

class Question {

  constructor(public question:string,public options:any[],public id:string) { }

}

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

export class AppComponent implements OnInit {

   questions: Question[];       
   constructor(private firestore: AngularFirestore,private http:HttpClient) {

   }

   ngOnInit(){}

   createData(){
        // im directly creating static data as you mentioned

        // here i am adding data inside **questions** collection
        // it will be automatically created

       this.firestore.collection('questions').add(
         {
          question:"where is that ",
          options:[
            {
              "A":"b",
              "isSelected":false
            },
            {
              "B":"b",
              "isSelected":false
             }
           ]
          }
        );
    }

    getData() {
      //getting data from google firebase

      this.firestore.collection('questions').snapshotChanges().subscribe(data=> .             {
            this.questions = data.map(e=>{
            return {
            id: e.payload.doc.id,
            ...e.payload.doc.data()
          } as Question;
        });
      console.log("data is ",this.questions);
      });

    }

}

app-component.html 文件

<button (click)="createData()">create Data !</button>
<button (click)="getData()">create Data !</button>
// in the console you can recieved data in same structure as you mentioned

package.json 文件

"dependencies": {
 "@angular/animations": "~7.2.0",
 "@angular/common": "~7.2.0",
 "@angular/compiler": "~7.2.0",
 "@angular/core": "~7.2.0",
 "@angular/fire": "^5.2.1", // install this one
 "@angular/forms": "~7.2.0",
 "@angular/material": "^6.4.7",
 "@angular/platform-browser": "^7.2.15",
 "@angular/platform-browser-dynamic": "~7.2.0",
 "@angular/router": "~7.2.0",
 "@ng-bootstrap/ng-bootstrap": "^4.2.2",
 "angular-google-charts": "^0.1.6",
 "angularfire2": "^5.2.1", // install this one
 "bootstrap": "^4.3.1",
 "core-js": "^2.5.4",
 "firebase": "^6.6.1",// install this one
 "rxjs": "~6.3.3",
 "tslib": "^1.9.0",
 "zone.js": "~0.8.26"
},

对于有角火力的基地，我点击了此链接。

angular-firebase integration

注意 ::请忽略不必要的模块（仅关注Firebase软件包）

如何在Firebase数组中获取列表类型数据

1 个答案: