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

---

我遵循这个中间链接来生成firebase项目

遵循上述url后，您需要在angular应用程序中包含firebase凭据。我在环境文件夹中创建了一个新文件（environment.ts），并将该文件导入app-module.ts。如下图所示

environment.ts位于angular应用程序中的environments文件夹内

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

应用程序模块.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 { }

<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

"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"
},

应用程序组件.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文件

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 { }

<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

"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，我遵循了这个链接

---

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

您能否指定数据格式，如数组或类对象？或者像对象数组这样的所需输出？对象数组我遵循此链接。我得到的数据像这样的对象数组。。你能告诉我你只想要那个模式的数据吗？你能告诉我你想要和上面URL中提到的一样的数据格式吗？是的，相同的结构