Angular 5中不使用*ngFor更新Firestore数据的实现方法

我明白你的需求啦——不用*ngFor的情况下，点击Update按钮修改Firestore集合里指定文档的proyecto.descripcion字段对吧？咱们一步步来实现：

1. 组件中初始化Firestore文档引用与数据 #

首先在你的Angular组件里注入AngularFirestore，然后获取目标文档的引用，并加载当前数据（方便显示原描述，也能初始化输入框）：

import { Component } from '@angular/core';
import { AngularFirestore, DocumentReference } from '@angular/fire/compat/firestore';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  private targetDocRef: DocumentReference;
  proyectoData: any;
  newDescripcion: string; // 绑定输入框的新描述值

  constructor(private afs: AngularFirestore) {
    // 替换成你的集合名称和目标文档ID
    this.targetDocRef = this.afs.collection('tu-collection').doc('目标文档ID');
    
    // 加载当前文档数据，初始化输入框为原描述
    this.targetDocRef.valueChanges().subscribe(data => {
      this.proyectoData = data;
      this.newDescripcion = data?.proyecto?.descripcion;
    });
  }
}

2. 编写无*ngFor的HTML模板 #

直接绑定输入框和按钮点击事件，完全不用循环指令：

<!-- 输入框用于修改描述，默认显示原内容 -->
<input type="text" [(ngModel)]="newDescripcion" placeholder="输入新的描述内容">
<!-- 点击按钮触发更新逻辑 -->
<button (click)="updateDescripcion()">Update</button>

3. 实现更新字段的核心方法 #

使用Firestore的update()方法，精准修改嵌套的proyecto.descripcion字段，避免覆盖文档其他内容：

updateDescripcion() {
  if (!this.newDescripcion) return; // 空值不执行更新

  this.targetDocRef.update({
    'proyecto.descripcion': this.newDescripcion // 用点路径指定嵌套字段
  }).then(() => {
    console.log('描述更新成功！');
  }).catch(error => {
    console.error('更新失败：', error);
  });
}

额外说明：如果不知道文档ID怎么办？ #

如果不是通过已知ID获取文档，而是需要条件查询单个文档，可以用get()方法获取查询结果的第一个文档：

// 示例：根据某个字段匹配获取目标文档
this.afs.collection('tu-collection', ref => 
  ref.where('proyecto.nombre', '==', '某个项目名称')
).get().subscribe(querySnapshot => {
  if (!querySnapshot.empty) {
    const targetDoc = querySnapshot.docs[0];
    this.targetDocRef = targetDoc.ref;
    this.proyectoData = targetDoc.data();
    this.newDescripcion = targetDoc.data()?.proyecto?.descripcion;
  }
});

注意：用update()方法只会修改指定字段；如果误用set()方法，记得加上{ merge: true }参数，否则会覆盖整个文档的其他数据哦。

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