Angular5+AngularFireList：如何推送含输入值的数据至数据库？

嘿，作为刚接触Angular 5和AngularFireList的新手，我完全懂你想把用户输入的数据推送到数据库的需求！咱们来一步步把这个问题捋清楚，优化你的代码。

首先，先说说你原来的代码：它其实能工作，但有点冗余——先push一个初始对象，再用set覆盖它，咱们可以把这两步合并得更简洁高效。

第一步：确认你的CategoryService配置正确 #

首先要确保你的categoryService里的categories()方法是正确返回AngularFireList引用的，比如在category.service.ts里：

import { AngularFireDatabase } from 'angularfire2/database';
import { Injectable } from '@angular/core';

@Injectable()
export class CategoryService {
  constructor(private db: AngularFireDatabase) {}

  // 返回数据库中categories节点的列表引用
  categories(): AngularFireList<any> {
    return this.db.list('/categories');
  }
}

第二步：简化推送输入数据的代码 #

你想要推送包含用户输入值的分类数据（名称、描述），如果还需要把生成的节点ID作为uid存进去，咱们可以这样写：

// 组件中的添加分类方法
addCategory(userInputCategory: {name: string, description: string}) {
  // 获取数据库列表引用
  const categoryListRef = this.categoryService.categories();

  // 先推送基础数据，生成新节点
  const newCategoryRef = categoryListRef.push({
    name: userInputCategory.name,
    description: userInputCategory.description
  });

  // 用生成的节点ID更新uid字段
  newCategoryRef.update({
    uid: newCategoryRef.key
  });

  // 可选：推送完成后清空输入框
  userInputCategory.name = '';
  userInputCategory.description = '';
}

如果你不需要单独存uid字段，其实newCategoryRef.key就是这条数据的唯一标识，直接用这个key来引用数据就好，代码会更简单：

addCategory(userInputCategory: {name: string, description: string}) {
  const newCategoryRef = this.categoryService.categories().push(userInputCategory);
  console.log('新增分类的ID：', newCategoryRef.key);
  // 清空输入框
  userInputCategory.name = '';
  userInputCategory.description = '';
}

第三步：绑定用户输入到组件 #

最后要确保你的模板正确绑定了输入框到组件的属性，比如在组件的HTML里：

<div class="category-form">
  <input type="text" [(ngModel)]="newCategory.name" placeholder="请输入分类名称" required>
  <textarea [(ngModel)]="newCategory.description" placeholder="请输入分类描述"></textarea>
  <button (click)="addCategory(newCategory)">添加分类</button>
</div>

然后在组件类里初始化输入对象：

import { Component } from '@angular/core';
import { CategoryService } from './category.service';

@Component({
  selector: 'app-category',
  templateUrl: './category.component.html'
})
export class CategoryComponent {
  // 初始化用户输入的分类对象
  newCategory = { name: '', description: '' };

  constructor(private categoryService: CategoryService) {}

  // 调用上面写的添加方法
  addCategory(category: any) {
    const newCategoryRef = this.categoryService.categories().push({
      name: category.name,
      description: category.description
    });
    newCategoryRef.update({ uid: newCategoryRef.key });
    // 清空输入
    category.name = '';
    category.description = '';
  }
}

这样修改后，用户输入的分类信息就能正确推送到Firebase数据库啦！如果还有其他问题，随时说～

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