编辑Cruceros时tituloQueHacer存储格式异常问题求助

问题描述 #

在Cruceros管理系统中，编辑Crucero文档时，将tituloQueHacer字段的字符串元素从"hola"修改为"adios"后，Firestore中该字段原本的字符串数组（如["hola", "foo"]）变成了对象数组（如[{descripcion: "adios"}, {descripcion: "foo"}]），不符合预期。

可能原因及解决方案 #

1. 检查表单绑定逻辑 #

最常见的问题是表单输入框错误绑定到对象属性，而非直接绑定数组的字符串元素：

• 错误示例（模板驱动表单）：

  <ion-input *ngFor="let item of crucero.tituloQueHacer; let i=index" [(ngModel)]="item.descripcion"></ion-input>
  

• 正确示例：

  <ion-input *ngFor="let item of crucero.tituloQueHacer; let i=index" [(ngModel)]="crucero.tituloQueHacer[i]"></ion-input>
  

如果使用响应式表单，需确保FormArray的控件是FormControl而非FormGroup：

• 错误示例：

  this.tituloQueHacerArray = this.formBuilder.array([
    this.formBuilder.group({ descripcion: ['hola'] })
  ]);
  

• 正确示例：

  this.tituloQueHacerArray = this.formBuilder.array(['hola', 'foo']);
  

2. 校验Firestore更新逻辑 #

更新文档时，必须确保传入的tituloQueHacer是纯字符串数组，而非对象数组：

• 错误示例：

  this.firestore.collection('cruceros').doc(id).update({
    tituloQueHacer: this.tituloQueHacerArray.value.map(item => ({ descripcion: item }))
  });
  

• 正确示例：

  this.firestore.collection('cruceros').doc(id).update({
    tituloQueHacer: this.tituloQueHacerArray.value
  });
  

3. 排查数据读取转换 #

从Firestore读取数据时，避免不必要的结构转换：

• 错误示例：

  this.crucero$ = this.firestore.doc('cruceros/' + id).valueChanges().pipe(
    map(data => ({
      ...data,
      tituloQueHacer: data.tituloQueHacer.map(item => ({ descripcion: item })) // 错误包装字符串
    }))
  );
  

• 正确示例：

  this.crucero$ = this.firestore.doc('cruceros/' + id).valueChanges();
  

4. 调试数据结构 #

在执行更新前添加日志，确认数据结构是否符合预期：

console.log('待更新的tituloQueHacer:', this.crucero.tituloQueHacer);
// 确认输出为字符串数组后再执行更新操作

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