在Angular中获取和显示Firebase中的数据
可以通过以下步骤实现：
- 首先，确保已经在Angular项目中安装了Firebase SDK。可以通过运行以下命令来安装Firebase SDK：
- 首先，确保已经在Angular项目中安装了Firebase SDK。可以通过运行以下命令来安装Firebase SDK：
- 在Angular项目中创建一个Firebase服务，用于与Firebase进行通信。可以使用Angular CLI生成一个服务文件，运行以下命令：
- 在Angular项目中创建一个Firebase服务，用于与Firebase进行通信。可以使用Angular CLI生成一个服务文件，运行以下命令：
- 在Firebase服务中导入Firebase SDK和Angular的相关模块，并初始化Firebase应用。在Firebase服务的构造函数中，使用Firebase的配置信息初始化Firebase应用。例如：
- 在Firebase服务中导入Firebase SDK和Angular的相关模块，并初始化Firebase应用。在Firebase服务的构造函数中，使用Firebase的配置信息初始化Firebase应用。例如：
- 在需要获取和显示Firebase数据的组件中，注入Firebase服务，并调用相应的方法来获取数据。例如，可以在组件的构造函数中注入Firebase服务，并使用
valueChanges()方法来获取Firebase数据库中的数据： - 在需要获取和显示Firebase数据的组件中，注入Firebase服务，并调用相应的方法来获取数据。例如，可以在组件的构造函数中注入Firebase服务，并使用
valueChanges()方法来获取Firebase数据库中的数据： - 在上面的例子中，
getData()是Firebase服务中的一个自定义方法，用于获取Firebase数据库中的数据。 - 最后，在组件的模板中使用Angular的数据绑定语法来显示从Firebase获取的数据。在上面的例子中，使用
*ngFor指令来遍历firebaseData数组，并将每个数据项显示为列表项。
这样，就可以在Angular中获取和显示Firebase中的数据了。请注意，上述代码仅为示例，实际应用中可能需要根据具体情况进行适当的修改和调整。
关于Firebase的更多信息和使用方法，可以参考腾讯云提供的Firebase产品介绍页面：Firebase产品介绍。
相关·内容
1回答
如何将数据从Firebase获取到服务，然后正确地传递到页面(Angularfire + ionic4)？
angular、ionic-framework、firebase-realtime-database、angularfire、angular-services
我正在尝试通过一个名为firebase.service的函数从获取数据到getData()中。
--我可以在firebase.service中获取数据，但不能将它们加载到mypage页面。在控制台中，我可以看到当页面加载时，数据不是从Firebase读取的，而是在加载之后。
控制台日志：
mypage.page.ts:16 undefined
firebase.service.ts:20 here is my data
如何才能只读取一次数据并在页面中显示？使用服务？
mypage.page.ts代码：
import { Component, OnInit } from '@angu
浏览 1提问于2021-09-19得票数 0
回答已采纳
3回答
如何将自定义服务注入另一个自定义服务？
angular、angular2-services
即使在引导No Provider for FirebaseService方法中的FirebaseService之后，我也会得到一个bootstrap(app, [providers])错误。
我遵循，当我向Http服务注入引导的HTTP_PROVIDERS时，它起了作用，但是在将它更改为自己的服务后，我收到了一个No providers for FirebaseService错误。
我可以通过删除FirebaseService的注入来分别注入两个提供者。即使我做了contructor(@Inject(FirebaseService) firebase: FirebaseService){}，它
浏览 3提问于2016-06-06得票数 9
回答已采纳
2回答
基于Firebase的Angular6服务构建行为/序列问题
javascript、angular、firebase、google-cloud-firestore
我有一些构造顺序问题，导致我的Firebase应用程序不能像预期的那样工作。
我有一个FirebaseService来初始化firebase/app
import { Injectable } from '@angular/core';
import * as Firebase from 'firebase/app';
import 'firebase/auth'
import 'firebase/firestore'
import { environment } from '../../environments/envi
浏览 1提问于2018-11-06得票数 0
1回答
角度firebase数据子句和取数错误
firebase、firebase-realtime-database、angular7
My motive is to get userdetails from firebase 我的firebase.service.ts import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { AngularFirestore } from '@angular/fire/firestore';
import { Observable } from 'rxjs/Obse
浏览 16提问于2018-12-27得票数 0
回答已采纳
1回答
NullInjectorError:没有AngularFireAnalytics的提供者！角8
angular、firebase、webpack、firebase-analytics
当运行“npm测试”时，我会收到以下错误：
StaticInjectorError(DynamicTestModule)ComparePageComponent -> AngularFireAnalytics: StaticInjectorError(平台:核心)ComparePageComponent -> AngularFireAnalytics: NullInjectorError:无AngularFireAnalytics提供程序！错误属性:对象({ ngTempTokenPath: null，ngTokenPath：'ComparePageComponent
浏览 0提问于2020-01-16得票数 2
1回答
如何解析路由中的angularfire2数据？
angular、angularfire2、angular-resolver
正在尝试从路由器中的angularfire2解析一些数据。当我传递angularfire时，我的组件记录了Hello Alligator，但是当我尝试解析来自angularfire服务的数据时，它就挂起了，永远不会解析。我也想把它设置在我仍然可以添加到集合中的地方。我做错了什么？
//SmsListResolverService
import {Resolve, ActivatedRouteSnapshot, RouterStateSnapshot} from '@angular/router'
import {Observable, of} from 'rx
浏览 0提问于2018-12-12得票数 0
1回答
可观察对象不会发出新值
javascript、typescript、firebase、angular、rxjs
我正在尝试将angular 2与firebase一起使用，我已经设法将数据推送到firebase并获得支持，但当我尝试将新数据添加到firebase中时，它们不会自动反映在.get可观察性中-必须刷新页面或在路由之间切换，这是正确的行为吗？如果不是，我应该怎么做才能在新值到来时自动更新视图？
import { Component, OnInit } from "angular2/core";
import { FirebaseService } from "../shared/firebase.service";
import { ArcItem } from
浏览 3提问于2016-03-09得票数 0
1回答
来自firebase的数据不显示角2β。
angular、firebase、firebase-realtime-database
当单击按钮但没有显示按钮时，我尝试显示来自firebase的数据。下面是我写的三个文件。
firebase.service.ts
import { Injectable } from 'angular2/core';
import { Http, Response } from 'angular2/http';
const myFirebase = 'https://*****.firebaseio.com';
@Injectable()
export class FirebaseService {
constructor(priva
浏览 2提问于2016-07-14得票数 1
2回答
管道'AsyncPipe‘的参数无效
javascript、typescript、firebase、angular
因此，当我尝试从firebase获取数据时，会得到这样的结果
Invalid argument '{"-KCO4lKzEJPRq0QgkfHO":{"description":"teste","id":1457488598401,"resourceUrl":"tete","title":"test2"}}' for pipe 'AsyncPipe' in [listItems | async in ArcListComponent@2
浏览 2提问于2016-03-09得票数 8
1回答
尝试使用对象属性访问文档信息
angular、google-cloud-firestore、angular7
潜伏已久的人，第一次发问的人。 我正在尝试学习angular 7，我正在制作一个crud应用程序，用于将大学橄榄球队添加到数据库中并检索数据。我正在使用google firestore作为数据库。 我能够检索团队的id并将其存储在一个变量中，但是我遇到了使用id来检索文档，然后使用对象属性来获取信息的问题。任何帮助都是非常感谢的。 firebase.service.ts import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection, Angul
浏览 21提问于2019-05-16得票数 2
1回答
如何显示产品细节(角/火基)？
angular、typescript、firebase、google-cloud-firestore、uikit
Data product.model.ts
id?: string;
name: string;
price: number;
price_solde: number;
description: string;
fichetech: string;
imageURL: string[];
category: string;
createdAt: Date;
}
创建一个文件 product.service.ts最后一个通过ID获取产品的函数getDetailProduct(productId: string)
import { Injectable } fr
浏览 2提问于2022-07-08得票数 1
回答已采纳
1回答
如何将用户添加到数据库中并授权用户
angular、typescript、firebase、firebase-realtime-database、firebase-authentication
我在用火基学角。我目前正在努力创建一个用户在防火墙，但也添加到数据库与他们的电子邮件和用户Id的用户。
我有一个组件正在调用我的消防服务。
//Regier.Component.ts
import { FirebaseService } from '../../services/firebase.service';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-register',
templateUrl: '
浏览 3提问于2017-10-18得票数 0
回答已采纳
8回答
如何使用snapshotChanges()方法同时获取键值和过滤数据？
angular、firebase、firebase-realtime-database、angularfire2
我正在做一个Angular Firebase项目，在这个项目中，我需要过滤我的数据库以及获取键值。目前，我在我的服务代码中(在getUnreadBooks和getFavoriteBooks方法中，如下所示)使用valueChanges()方法来获取数据并对其进行过滤。但是当我试图在我的模板文件中获取键值时，它给我的键值是“未定义的”。我尝试使用snapshotChanges()方法，但无法解决如何在过滤数据的同时使用它来获取键值。下面是我的Angular FirebaseService、home.component.ts (我在其中注入我的服务代码)和home.component.html (
浏览 51提问于2018-03-06得票数 13
回答已采纳
1回答
防火墙存储中的错误
javascript、angular、firebase、firebase-storage
当我尝试这个删除函数的角度和火基
/item.component.ts
import { Component, OnInit } from '@angular/core';
import { FirebaseService } from '../../services/firebase.service';
import { Router} from '@angular/router';
import * as firebase from 'firebase';
@Component({
selector: 'app
浏览 2提问于2017-03-30得票数 2
回答已采纳
2回答
update()对象RTDB Firebase
angular、firebase、firebase-realtime-database
为什么，当我尝试在firebase中更新实时数据库对象的titulo字段时，它会生成另一个字段？更新的正确方式是什么？我正在看文档：，如果我工作的话，他们在那里展示了一个例子，但那是一个列表。在本例中，我使用的是不同页面上的对象。有什么想法吗？
editar.component.html
<input type="text" #newtitulo [value]="titulo"/>
<button (click)="updateProyecto(key, newtitulo.value)">Update<
浏览 31提问于2017-12-29得票数 0
1回答
如何将数据作为对象从Firebase获取到服务，然后正确地传递到页面(Angularfire + ionic4)？
angular、typescript、firebase-realtime-database、ionic4、angularfire
我正试图通过mypage.page从Firebase Realtimedatabase获取数据
我可以在mypage.page.In和mypage.page中获得简单的数据(例如字符串)，但是我不能将对象加载到Cannot read properties of undefined (reading 'id').控制台--我得到了大量的错误消息Cannot read properties of undefined (reading 'id').
控制台日志：
core.js:6479 ERROR TypeError: Cannot read properties
浏览 0提问于2021-09-19得票数 0
回答已采纳
1回答
Angular2 / Firebase -异常: TypeError:无法读取未定义的属性“push”
angular、typescript、firebase、firebase-realtime-database、push
我正在尝试创建一个Angular2和Firebase Web应用程序(CRUD)。当我试图添加一个新的业务用户时，出现了一个错误。
appComponent.ts文件：
import { Component, OnInit} from '@angular/core';
import { AngularFire, FirebaseListObservable } from 'angularfire2';
import {FirebaseService} from './services/firebase.service';
import &
浏览 3提问于2016-12-06得票数 1
回答已采纳
1回答
为什么firebase数据不加载到html模板中
angular、firebase、ionic-framework
我一直在尝试用离子检索数据库中的数据。问题是，无论我尝试什么，数据都不会显示在我的离子页面上。我甚至从教程中试过，比如：
(它的出现类似于我一直在做的事情)
以防万一我错了或者失去了联系，但仍然是同一个问题。在网上搜索没有成功后，我返回到原来的，问题是它只是显示一个空白页，它不会出现任何错误。
对于service.ts
import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firest
浏览 3提问于2020-07-11得票数 0
回答已采纳
1回答
动态存储文件检索
firebase、angularfire2
我已经成功地检索了一个硬编码的映像(从获得基)：
listings.component.ts
import { Component, OnInit } from '@angular/core';
import {FirebaseService} from '../../services/firebase.service';
import * as firebase from 'firebase';
@Component({
selector: 'app-listings',
templateUrl: './lis
浏览 0提问于2017-04-07得票数 1
回答已采纳
1回答
列表功能不起作用，不知何故，它在console.log()角中被奇怪地显示出来
arrays、angular、typescript、firebase
我想使用一个列表来存储数据，然后再显示它。但是当我使用ListOfName.lenth时，我看到了控制台1：的照片
但是当Console.log(ListOfName)在控制台2：中看到列表的照片时
家庭部分：
import { Component, Input, OnInit } from '@angular/core';
import {Subject} from "rxjs";
import {FirebaseService} from "../services/firebase.service";
import {JSDocTagName
浏览 3提问于2022-01-16得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
