Ionic Angular表单问题：@Input未加载服务注入的Firebase数据

问题根源 #

子组件表单初始化早于@Input真实数据的接收，异步请求返回的用户数据无法自动同步到已初始化完成的表单中，导致表单始终显示默认值。

解决方案 #

1. 子组件监听@Input变化更新表单

通过实现OnChanges接口，捕获users数据的变化事件，在真实数据传入时手动更新表单控件值：

import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

export class EventoComponent implements OnInit, OnChanges {
  @Input() users: Atencion[] = [{ userName: 'John' }];
  public myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    // 初始化表单（使用默认值）
    this.myForm = this.fb.group({
      userName: [this.users[0].userName]
    });
  }

  ngOnInit(): void {}

  ngOnChanges(changes: SimpleChanges): void {
    // 检测users数据是否发生更新
    if (changes['users']?.currentValue?.length) {
      const latestUserName = changes['users'].currentValue[0].userName;
      // 同步更新表单控件值
      this.myForm.patchValue({ userName: latestUserName });
    }
  }
}

2. 优化父组件数据处理逻辑

确保父组件正确处理Firebase返回的数据结构，避免因格式问题导致子组件无法接收有效数据：

export class EventoPage implements OnInit {
  users: Atencion[] = [];

  constructor(private dataService: GetDataService) {}

  ngOnInit() {
    this.dataService.getUsersData().subscribe(userData => {
      // 根据接口返回结构调整：若返回单个用户对象，转为数组赋值
      this.users = [userData];
      // 若返回用户数组，直接赋值：this.users = userData;
    });
  }
}

原理说明 #

Angular组件初始化阶段会优先使用@Input的默认值创建表单，而Firebase异步请求返回的真实数据会在之后才更新@Input属性。通过ngOnChanges钩子可以监听@Input的变化，此时调用patchValue方法就能将最新数据同步到表单中，实现预期的显示效果。

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