Angular 5中如何将布尔值与数值存储至Firestore

嘿，我来帮你搞定这个表单值处理和Firestore存储的问题～首先得指出你当前代码里的两个核心问题，再给出更符合Angular最佳实践的解决方案：

一、当前代码的问题 #

• DOM操作不符合Angular理念：用document.getElementById直接操作DOM不是Angular推荐的方式，Angular有专门的表单处理机制，更安全且易维护。
• 类型转换错误：<HTMLInputElement>的value永远是字符串类型，你直接把它赋值给boolean或number变量会导致类型不匹配——比如选择框的locked值是"true"/"false"字符串，不是真正的布尔值；maxPlayers的字符串值也没法直接转成数字类型。

二、快速修复原生DOM写法（临时方案） #

如果你暂时不想改用Angular表单，可以先修正类型转换的问题：

// 处理选择框的布尔值（假设选择框的option值是"true"/"false"）
const lockedSelect = document.getElementById("locked") as HTMLSelectElement;
const locked: boolean = lockedSelect.value === "true";

// 处理数字输入框的值，同时处理空值/非数字情况
const maxPlayersInput = document.getElementById("maxPlayers") as HTMLInputElement;
const maxPlayers: number = maxPlayersInput.value ? parseInt(maxPlayersInput.value, 10) : 0;
// 或者用Number()简化，但要注意空字符串会转为0：const maxPlayers = Number(maxPlayersInput.value);

三、推荐：使用Angular响应式表单（更适合复杂表单） #

这是Angular官方推荐的表单处理方式，能自动处理类型转换，还支持验证：

1. 组件代码 #

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AngularFirestore } from '@angular/fire/firestore';

@Component({
  selector: 'your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  form: FormGroup;

  constructor(
    private fb: FormBuilder,
    private firestore: AngularFirestore
  ) {
    // 初始化表单，设置默认值和验证规则
    this.form = this.fb.group({
      locked: [false], // 默认不锁定
      maxPlayers: [1, [Validators.min(1), Validators.required]] // 至少1个玩家，必填
    });
  }

  // 提交表单并存储到Firestore
  onSubmit() {
    if (this.form.invalid) {
      console.log('表单验证不通过');
      return;
    }

    // 表单值已经是正确的类型：locked是boolean，maxPlayers是number
    const formData = this.form.value;

    // 存储到Firestore的指定集合
    this.firestore.collection('your-collection-name')
      .add(formData)
      .then(docRef => {
        console.log('数据已成功存储，文档ID:', docRef.id);
        // 存储成功后可以重置表单
        this.form.reset();
      })
      .catch(error => {
        console.error('存储数据时出错:', error);
      });
  }
}

2. 模板代码（HTML） #

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <!-- 锁定状态选择框 -->
  <div>
    <label>锁定状态：</label>
    <select formControlName="locked">
      <option [value]="true">是</option>
      <option [value]="false">否</option>
    </select>
  </div>

  <!-- 最大玩家数输入框 -->
  <div>
    <label>最大玩家数：</label>
    <input 
      type="number" 
      formControlName="maxPlayers"
      placeholder="请输入数字"
    />
    <!-- 显示验证错误 -->
    <span *ngIf="form.get('maxPlayers')?.invalid && form.get('maxPlayers')?.touched">
      请输入至少1个玩家数
    </span>
  </div>

  <button type="submit" [disabled]="form.invalid">提交</button>
</form>

四、如果是简单表单：模板驱动表单 #

如果你的表单逻辑比较简单，也可以用模板驱动表单：

1. 组件代码 #

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
import { AngularFirestore } from '@angular/fire/firestore';

@Component({
  selector: 'your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 绑定表单的变量，默认值
  locked = false;
  maxPlayers = 1;

  constructor(private firestore: AngularFirestore) {}

  onSubmit(form: NgForm) {
    if (form.invalid) return;

    const data = {
      locked: this.locked,
      maxPlayers: this.maxPlayers
    };

    this.firestore.collection('your-collection-name')
      .add(data)
      .then(docRef => console.log('存储成功，文档ID:', docRef.id))
      .catch(err => console.error('存储失败:', err));
  }
}

2. 模板代码 #

<form #playerForm="ngForm" (ngSubmit)="onSubmit(playerForm)">
  <div>
    <label>锁定状态：</label>
    <select [(ngModel)]="locked" name="locked" required>
      <option [value]="true">是</option>
      <option [value]="false">否</option>
    </select>
  </div>

  <div>
    <label>最大玩家数：</label>
    <input 
      type="number" 
      [(ngModel)]="maxPlayers" 
      name="maxPlayers"
      min="1"
      required
    />
  </div>

  <button type="submit" [disabled]="playerForm.invalid">提交</button>
</form>

五、Firestore配置注意事项 #

确保你已经完成了Angular Fire的基础配置：

• 安装依赖：npm install firebase @angular/fire
• 在app.module.ts中导入并初始化：

import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';

const firebaseConfig = {
  // 你的Firebase配置信息
};

@NgModule({
  imports: [
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFirestoreModule
  ]
})
export class AppModule {}

内容的提问来源于stack exchange，提问作者fahad navaid khan