AngularFire2 更新创建新的文档字段而不是更新字段答案

【问题标题】：AngularFire2 update creates new document field instead of updating a fieldAngularFire2 更新创建新的文档字段而不是更新字段
【发布时间】：2018-09-27 19:44:54
【问题描述】：

我想使用 Angular 6 更新包含配置文件名称和主题标签列表的 Firestore 模型。“名称”存储为文档字段的值，“主题标签”存储为对象的键.当我尝试更新数据库条目时，我的程序每次调用更新函数时都会添加一个名为“数据”的新文档字段，而不是更新现有字段。

我该如何解决这个问题？

这是更新前我的 Firestore 的样子。

我的更新函数添加了一个新的“数据”字段，而不是每次调用它时都更新。

我的 Firestore 服务：

export class MembersService {
  membersCollection: AngularFirestoreCollection<Member>;
  members$: Observable<Member[]>;
  memberDoc: AngularFirestoreDocument<Member>;

  constructor(public afs: AngularFirestore) {
    this.membersCollection = afs.collection<Member>('Members');
    this.members$ = this.membersCollection.snapshotChanges().pipe(
      map(actions => actions.map(a => {
        const data = a.payload.doc.data() as Member;
        const id = a.payload.doc.id;
        return { data, id };
      }))
    );
  }

   getMembers(): Observable<Member[]> {
     return this.members$;
   }

   updateMember(member: Member) {
    this.memberDoc = this.afs.doc(`Members/${member.id}`);
    this.memberDoc.update(member);
   }
}

我的输入组件.ts：

export class MembersComponent implements OnInit {
  members: Member[];
  editState: boolean;
  membertoEdit: Member;

  constructor(private membersService: MembersService) {
    this.editState = false;
   }

  ngOnInit() {
    this.membersService.getMembers().subscribe(members => {
      this.members = members;
    });
  }

  editMember(member: Member) {
    this.editState = true;
    this.membertoEdit = member;
  }

  clearState() {
    this.editState = false;
    this.membertoEdit = null;
  }

  submit(member: Member, editName: string, editHashtag: string) {
    if ( editName !== '' && editHashtag !== '') {
      this.membertoEdit.name = editName;
      const key = editHashtag;
      const object = {};
      object[key] = true;
      this.membertoEdit.hashtag = object;
      this.membersService.updateMember(this.membertoEdit);
    }
    this.clearState();
  }
}

用户输入的我的component.html：

<button *ngIf="editState == false" (click)="editMember(member)">edit</button>

<div *ngIf="editState && membertoEdit.id == member.id">
  <form>
      <input type="text"  #editName>
      <input type="text" #editHashtag>
      <button (click)="submit(member, editName.value, editHashtag.value);
        editName.value=''">Submit</button>
    </form>>
</div>

【问题讨论】：

不看所有相关代码就很难说。请将您的member 接口添加到问题中。您将从 Firestore 获取的所有数据包装在 data 对象中，并在您的服务中使用：return { data, id };。我最好的猜测是你的意思是用这个分解对象：return { ...data, id };

标签： javascript angular typescript google-cloud-firestore angularfire2

【解决方案1】：

找到了解决方案：即使我也不认为它很优雅。可以单独传递每个输入

updateMember(member: Member, editName: string, editHashtag: object) {
    this.memberDoc = this.afs.doc(`Members/${member.id}`);
    console.log(this.memberDoc);
    this.memberDoc.update({
      name: editName,
      hashtag: editHashtag
    });
   }

submit(member: Member, editName: string, editHashtag: string) {
    if ( editName !== '' && editHashtag !== '') {
      const key = editHashtag;
      const object = {};
      object[key] = true;
      this.membersService.updateMember(member, editName, object);
    }
    this.clearState();
  }

【讨论】：