如何在Ionic Angular表单中显示Firebase数组descripcionQueHacer

1. 配置组件的表单数组（edit-crucero.page.ts） #

利用Angular响应式表单把descripcionQueHacer定义为FormArray，实现从Firebase加载数据时自动填充数组项，同时添加动态增删项的方法：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';
import { CrucerosService } from '../cruceros.service';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-edit-crucero',
  templateUrl: './edit-crucero.page.html',
  styleUrls: ['./edit-crucero.page.scss'],
})
export class EditCruceroPage implements OnInit {
  cruceroForm: FormGroup;
  cruceroId: string;

  constructor(
    private fb: FormBuilder,
    private crucerosService: CrucerosService,
    private route: ActivatedRoute
  ) {
    // 初始化表单，包含descripcionQueHacer表单数组
    this.cruceroForm = this.fb.group({
      // 保留你的其他表单字段，比如nombre、fecha等
      descripcionQueHacer: this.fb.array([])
    });
  }

  ngOnInit() {
    this.cruceroId = this.route.snapshot.paramMap.get('id');
    this.loadCruceroData();
  }

  // 快捷访问表单数组，模板中直接调用
  get descripcionQueHacerArray(): FormArray {
    return this.cruceroForm.get('descripcionQueHacer') as FormArray;
  }

  loadCruceroData() {
    this.crucerosService.getCrucero(this.cruceroId).subscribe(crucero => {
      // 填充其他表单字段，示例：this.cruceroForm.patchValue({ nombre: crucero.nombre })
      
      // 把Firebase返回的数组项逐个添加到表单数组
      if (crucero.descripcionQueHacer?.length) {
        crucero.descripcionQueHacer.forEach(item => {
          this.descripcionQueHacerArray.push(this.fb.control(item));
        });
      }
    });
  }

  // 添加新的描述输入项
  addDescripcionItem() {
    this.descripcionQueHacerArray.push(this.fb.control(''));
  }

  // 删除指定索引的描述项
  removeDescripcionItem(index: number) {
    this.descripcionQueHacerArray.removeAt(index);
  }

  // 保存修改逻辑
  saveCrucero() {
    if (this.cruceroForm.valid) {
      this.crucerosService.updateCrucero(this.cruceroId, this.cruceroForm.value)
        .then(() => {
          // 保存成功后的操作，比如返回列表页
        })
        .catch(err => console.error(err));
    }
  }
}

2. 在模板中渲染数组（edit-crucero.page.html） #

用*ngFor遍历表单数组的controls，绑定每个输入框到对应FormControl，同时提供增删按钮：

<ion-header>
  <ion-toolbar>
    <ion-title>Editar Crucero</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <form [formGroup]="cruceroForm">
    <!-- 示例其他表单字段 -->
    <ion-item class="ion-margin-bottom">
      <ion-label position="stacked">Nombre del Crucero</ion-label>
      <ion-input formControlName="nombre"></ion-input>
    </ion-item>

    <!-- 渲染descripcionQueHacer数组 -->
    <ion-list class="ion-margin-bottom">
      <ion-list-header>
        <ion-label>Qué Hacer</ion-label>
        <ion-button size="small" (click)="addDescripcionItem()" fill="clear">
          <ion-icon name="add-circle-outline"></ion-icon> Agregar
        </ion-button>
      </ion-list-header>

      <ion-item *ngFor="let control of descripcionQueHacerArray.controls; let i = index" class="ion-margin-bottom">
        <ion-label position="stacked">Item {{i + 1}}</ion-label>
        <ion-input [formControl]="control" placeholder="Ingresa la descripción"></ion-input>
        <ion-button slot="end" size="small" color="danger" (click)="removeDescripcionItem(i)">
          <ion-icon name="trash-outline"></ion-icon>
        </ion-button>
      </ion-item>
    </ion-list>

    <ion-button type="submit" (click)="saveCrucero()" expand="block" color="primary" [disabled]="!cruceroForm.valid">
      Guardar Cambios
    </ion-button>
  </form>
</ion-content>

3. 服务层适配数组保存（cruceros.service.ts） #

Firebase原生支持数组类型字段，直接传入包含数组的表单数据即可：

import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreDocument } from '@angular/fire/compat/firestore';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CrucerosService {

  constructor(private afs: AngularFirestore) { }

  // 获取单个crucero数据
  getCrucero(id: string): Observable<any> {
    return this.afs.doc(`Cruceros/${id}`).valueChanges();
  }

  // 更新crucero数据，直接传入含数组的对象
  updateCrucero(id: string, cruceroData: any): Promise<void> {
    return this.afs.doc(`Cruceros/${id}`).update(cruceroData);
  }
}

额外注意事项 #

• 务必在EditCruceroPageModule中导入ReactiveFormsModule，否则响应式表单无法生效：

  import { ReactiveFormsModule } from '@angular/forms';
  
  @NgModule({
    imports: [
      // 其他模块
      ReactiveFormsModule
    ]
  })
  export class EditCruceroPageModule {}
  

• 用可选链crucero.descripcionQueHacer?.length判断数组是否存在，避免空指针错误。

内容的提问来源于stack exchange，提问作者José Manuel Ruíz Bolaños