如何在没有后台的情况下发送angular 6表单？
在没有后台的情况下发送Angular 6表单，可以使用Firebase作为后端服务来处理表单数据的发送和存储。Firebase是一种由Google提供的云服务平台，它提供了实时数据库、身份验证、存储、托管等功能，非常适合用于前端开发。
下面是一个完整的步骤指南：
- 创建Firebase项目：访问Firebase控制台（https://console.firebase.google.com/），创建一个新的项目。
- 设置实时数据库：在Firebase控制台中，选择“数据库”选项卡，启用实时数据库，并设置数据库的规则为允许读写。
- 配置Angular项目：在Angular项目中，安装Firebase SDK并导入所需的模块。可以使用以下命令安装Firebase SDK：
- 配置Angular项目：在Angular项目中，安装Firebase SDK并导入所需的模块。可以使用以下命令安装Firebase SDK：
- 在Angular项目的
app.module.ts文件中，导入Firebase模块并配置Firebase： - 在Angular项目的
app.module.ts文件中，导入Firebase模块并配置Firebase： - 替换
YOUR_API_KEY、YOUR_AUTH_DOMAIN等字段为你在Firebase控制台中创建的项目的配置信息。 - 创建表单：在Angular组件中创建一个表单，并使用Angular的表单模块进行验证和处理。可以使用
ReactiveFormsModule来创建响应式表单。 - 创建表单：在Angular组件中创建一个表单，并使用Angular的表单模块进行验证和处理。可以使用
ReactiveFormsModule来创建响应式表单。 - 在上述代码中，我们使用
AngularFireDatabase来获取数据库实例，并使用push()方法将表单数据存储在名为submissions的数据库节点中。 - 显示数据：如果需要显示已提交的表单数据，可以使用
AngularFireDatabase来获取数据并在页面中展示。 - 显示数据：如果需要显示已提交的表单数据，可以使用
AngularFireDatabase来获取数据并在页面中展示。 - 在上述代码中，我们使用
valueChanges()方法来获取submissions节点下的数据，并使用async管道在模板中进行异步数据绑定。
通过以上步骤，你就可以在没有后台的情况下发送Angular 6表单数据了。Firebase提供了强大的实时数据库和身份验证功能，可以轻松地处理表单数据的发送和存储。同时，Firebase还提供了其他功能，如存储、托管等，可以根据具体需求进行扩展。
推荐的腾讯云相关产品：腾讯云云开发（https://cloud.tencent.com/product/tcb）是一款类似Firebase的云服务产品，提供了类似的后端服务功能，适用于前端开发和无后台开发场景。
相关·内容
1回答
错误:类型“”DatabaseSnapshot<unknown>“”上不存在属性“”doc“”
angular、firebase、firebase-realtime-database
我正在构建一个angular + firebase应用程序，我有一个服务文件，它应该从firebase实时数据库中获取members： import { Injectable } from '@angular/core';
import { FormControl, FormGroup } from "@angular/forms";
import { AngularFireDatabase, AngularFireList } from "@angular/fire/database";
import { map } from 'rx
浏览 76提问于2021-08-24得票数 0
1回答
angular和firebase -设置联系人表单
angular、typescript、firebase、google-cloud-firestore、angularfire2
我对angular和firebase比较陌生，我正在尝试在我的投资组合网站上建立一个联系人表单。不确定如何准确地实现这一点。根据我一直在读的一本旧指南，到目前为止，我读到了以下内容： app.module.ts import { BrowserModule } from '@angular/platform-browser';
import { NgModule, NO_ERRORS_SCHEMA} from '@angular/core';
import { RouterModule } from '@angular/router';
imp
浏览 9提问于2020-10-05得票数 1
1回答
从角构造函数调用时得到一个注入错误
angular、firebase
我得到了一个NG0203运行时错误: NG0203: inject()必须从注入上下文(例如构造函数)调用
这个错误发生在我的类的构造函数中，我认为它是在注入上下文中，根据上面的错误。这是我的代码：
import { Component } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/compat/database'
@Component({
selector: 'app-root',
templateUrl: './app.
浏览 5提问于2022-10-28得票数 0
回答已采纳
2回答
我不能从火柴实时数据库中获取数据到角度6
angular、firebase
我使用的是角6，“@角/火”："^5.1.1"，“火基”："^5.6.0"，我想获取我的数据库的所有数据，但不要得到它，我尝试了很多方法，这是我的appmodule.ts：
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AngularFireDatabaseModule } from '@angular/fi
浏览 1提问于2018-12-05得票数 1
回答已采纳
2回答
如何使用Angular检索firebase数据库内容的所有id？
html、css、angular、typescript
我正在尝试检索所有firebase数据库内容及其ID。目前，我有两个函数，getAll()和get(input)，它们返回一个具有给定ID的特定产品。我当前的实现提供了firebase数据库中没有ID的所有对象。我需要做哪些更改才能获取所有对象的ID？
product.service.ts
import { Injectable } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';
import { Product } from './
浏览 2提问于2020-05-30得票数 0
2回答
离子/角/电容/ Firebase Facebook Auth &基于角色的身份认证
angular、firebase、ionic-framework、capacitor、role-based-access-control
我有一个在Android下使用Ionic Angular Capacitor Firebase创建的facebook身份验证，即完全工作的。
我试图做的是:拥有一个基于角色的authentification.What :将我的用户的facebook ID注册到一个实时数据库中，在该数据库中，我将为每个用户创建type值。
因此，当我的用户第一次登录时，我会在realtimedatabase.中创建一个。
错误:没有在数据库中创建，但是我没有任何错误消息。
以下是我的共享服务：
import { Injectable } from '@angular/core';
import
浏览 6提问于2021-01-28得票数 0
回答已采纳
2回答
如何使用角度离子从我的Firebase实时数据库中获取一个项目
angularjs、typescript、firebase、ionic-framework、firebase-realtime-database
，这是我的实时数据库，我想找到连接者的文章，并显示信息
这是我的离子脚本页面
下面是我的导入，我可以检索要连接的用户的id，但不能在实时数据库中检索这些信息。
import { Component } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { AngularFireDatabase, AngularFireList } from '@angular/fire/compat/databa
浏览 1提问于2021-10-28得票数 0
回答已采纳
1回答
我的angularfire应用程序上没有显示数据
angular、firebase、angularfire2
当我尝试使用以下命令显示数据时：
<li *ngFor="let course$ of courses$ | async">
<pre>{{ course$.title }}</pre>
</li>
对于angularfire2，我没有数据显示。当我执行console.log(课程$)时，我看到以下对象:可观察{_isScalar: false，来源:可观察，运算符: MapOperator}
我遵循了这个指南：
app.component.ts：
import { Component } from '@angula
浏览 3提问于2019-10-21得票数 0
1回答
登录的意外标记"#“
angular
我收到了这个:登录(#userName.value，#userPassword.value)中第7列的意外令牌号 现在我知道它是由 <div class="displayTable">
<div class="displayTableCell">
<div class="formGroup">
<input type="text" class="formControl" placeholder="Username" #userName
浏览 6提问于2021-01-21得票数 0
回答已采纳
1回答
Firebase实时数据库离子返回null
html、angular、firebase、ionic-framework、ionic4
我正在尝试使用Angular将Firebase数据库整合到我的离子应用程序中。我按照AngularFire github页面(https://github.com/angular/angularfire2)上的说明操作，但是当我实际运行应用程序时，我总是得到一个空响应。我对db.object方法(db.object(‘’item‘))的输入也感到困惑。“item”实际上代表什么？ 这是我的app.component.ts文件 import { Component } from '@angular/core';
import { Platform } from '@io
浏览 40提问于2018-12-27得票数 0
回答已采纳
1回答
我想在home.html页面中显示"$ key“以确保代码正常工作，它在ionic中显示一行"snapshotChanges ();”
android、angularjs、node.js、firebase、ionic-framework
此代码在project.html中不起作用
html中的$key不起作用
<p>{{shopadd.$key}}</p>
从project.ts导入此文件
import { Component } from '@angular/core';
import { NavController ,NavParams } from 'ionic-angular';
import { AngularFireDatabase , AngularFireList } from '@angular/fire/database';
imp
浏览 0提问于2018-10-12得票数 0
4回答
Firebase返回angularfire2中的"app/bad-app-name“。
javascript、angular、firebase、angularfire2
在我的角度应用程序中，Firebase返回一个错误，它将bad-app-name显示为代码。我在角应用程序中使用angularfire2。
我已经双重检查了Firebase的配置，没关系，那么如何解决这个错误。
app.components.ts
import { Component, OnInit } from '@angular/core';
import { FormsModule, NgForm } from "@angular/forms";
import { AngularFireDatabase } from "angularfire2/d
浏览 0提问于2018-05-16得票数 5
1回答
从火焰数据库读取数据角8
angular、typescript、firebase、firebase-realtime-database、angularfire2
我试图从firebase数据库读取数据，下面是我的代码:我的组件：
import { Component, OnInit } from '@angular/core';
import { ProductService } from 'src/app/services/product.service';
import { Observable } from 'rxjs';
@Component({
selector: 'app-admin-products',
templateUrl: './admin-produ
浏览 1提问于2019-09-14得票数 1
回答已采纳
2回答
Angular StaticInjectorError
javascript、angular
嗨，我是第一次使用angular，所以我遵循了youtube的教程来建立一个聊天。此项目位于所有者github->
我尝试将AngularFireDatabase添加到提供商中，但它仍然不起作用。我不知道为什么当我尝试登录时会出现这个错误。
这是我的app.module.ts文件：
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@
浏览 43提问于2018-06-10得票数 0
回答已采纳
2回答
角-cli 13.3.7订阅错误this.data未定义
angular、typescript
我想从Firebase实时数据库返回数组
这是我的密码：
add-student.component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { CurdService } from '../shared/curd.service';
import Swal from 'sweetalert2';
import {
浏览 7提问于2022-07-08得票数 0
回答已采纳
1回答
Angular，无法将数据显示为来自firebase的列表
javascript、angular、firebase、firebase-realtime-database
我试图在angular中显示来自firebase的数据，但我似乎无法从加载中获取列表对象，并且总是导致空白，错误为ERROR Error: InvalidPipeArgument: '' for pipe 'AsyncPipe' 我甚至遵循了fire模块指南，但它似乎不起作用。 以下是我的组件代码 import {AngularFireDatabase,AngularFireList} from '@angular/fire/compat/database';
import { Observable } from 'rxjs';
浏览 10提问于2021-10-15得票数 0
1回答
如何使用AngularFireDatabase更好地查询列表？
javascript、angular、firebase-realtime-database、firebase-authentication、angularfire2
"@angular/fire": "^5.2.3",
我正在使用AngularFireDatabase来操作firebase中的数据。我需要在Firebase中检索和更新下面的表格。我目前正在用下面的方法做这件事。有没有更好的方法可以用它来查询？因为，我正在下载整个表，然后再次上载它。我不想下载整个提交列表，而只想直接将一个对象推送到提交数组中。提前谢谢。
// Get form submissions for a specific form
getFormSubmissions(key: string) {
this.userSubmissi
浏览 1提问于2020-11-08得票数 1
2回答
如何解决"Error: No provider for AngularFireDatabase“
angular、firebase、angularfire2
我正在尝试建立一个使用Angular & Firebase的原始聊天应用程序。
foll是我的路线：
export const appRoutes: Routes = [
{ path: 'signup', component: SignupFormComponent },
{ path: 'login', component: LoginFormComponent },
{ path: 'chat', component: ChatroomComponent },
{ path: '',
浏览 0提问于2017-12-08得票数 1
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回答
模块导入的意外值请添加@ngmodule注释
android、angular、ionic3、file-transfer
我已经创建了一个离子应用程序，在这个应用程序中，我想连接firebase和离子应用程序。但是在配置了firebase和离子型应用程序之后，我遇到了这样的问题：
模块导入的意外值请添加@ngmodule注释
我已经通过firebase导入了数据库，现在我想获取并向该数据添加新的数据。
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { ErrorHandler
浏览 3提问于2017-11-04得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
