Angular中点击按钮无法创建Firebase集合问题求助

我正尝试在Firebase中创建一个集合并在其中保存部分数据。以下是我的Angular组件代码：

import { Component, OnInit } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { AngularFirestore } from '@angular/fire/firestore';
@Component({
 selector: 'app-tab',
 templateUrl: './tab.page.html',
 styleUrls: ['./tab.page.scss'],
})
export class TabPage implements OnInit {
 constructor(
 private afAuth: AngularFireAuth,
 private afs: AngularFirestore
 ) { }
 ngOnInit() { }
 Save() {
 return this.afs.collection('INFO');
 }
}

对应的HTML代码为：

<ion-card text-center>
 <ion-input placeholder="RMSSD"></ion-input>
 <ion-button expand="block" (click)="Save()"> Save </ion-button>
</ion-card>

我希望即使不保存数据，点击按钮时也能创建集合，但点击后无报错却在Firebase中无任何变化，请求帮助。

我来帮你梳理下问题核心和解决思路：

核心原因 #

Firestore的集合是延迟创建的——它不会凭空存在，只有当你向集合中添加至少一个文档时，这个集合才会在Firebase控制台中显示出来。而你当前的Save()方法只是获取了集合的引用对象，完全没有执行任何实际的写入操作，所以Firebase不会创建这个集合。

基础解决：创建空文档触发集合生成 #

如果你只是想先把集合创建出来，哪怕没有数据，可以修改Save()方法，向集合中添加一个空文档：

方案1：自动生成文档ID

Save() {
  // 添加一个自动生成ID的空文档，触发集合创建
  return this.afs.collection('INFO').add({});
}

方案2：指定自定义文档ID

如果你想自己控制文档ID，也可以这样写：

Save() {
  // 创建ID为"initial-doc"的空文档
  return this.afs.collection('INFO').doc('initial-doc').set({});
}

进阶优化：保存输入框的数据 #

既然页面上有输入框，也可以把用户输入的RMSSD值一起保存，这样功能更完整：

1. 修改组件代码，添加数据绑定和保存逻辑：

import { Component, OnInit } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { AngularFirestore } from '@angular/fire/firestore';
@Component({
 selector: 'app-tab',
 templateUrl: './tab.page.html',
 styleUrls: ['./tab.page.scss'],
})
export class TabPage implements OnInit {
  rmssdValue: string; // 用于绑定输入框的值

 constructor(
 private afAuth: AngularFireAuth,
 private afs: AngularFirestore
 ) { }
 ngOnInit() { }

 Save() {
  // 将输入框的值存入集合，自动生成文档ID，同时添加时间戳
  return this.afs.collection('INFO').add({
    rmssd: this.rmssdValue,
    createdAt: new Date()
  });
 }
}

2. 修改HTML，添加双向数据绑定：

<ion-card text-center>
 <ion-input placeholder="RMSSD" [(ngModel)]="rmssdValue"></ion-input>
 <ion-button expand="block" (click)="Save()"> Save </ion-button>
</ion-card>

补充说明 #

this.afs.collection('INFO')只是创建了一个指向集合的本地引用，这个操作不会发送任何请求到Firebase服务器。只有当你调用add()、set()这类写入方法时，才会触发实际的数据库操作，Firebase才会在后台创建对应的集合和文档。

内容的提问来源于stack exchange，提问作者YLM