javascript - AngularFire2 更新创建新文档字段而不是更新字段

Question

我想使用 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>

标签： javascriptangulartypescriptgoogle-cloud-firestoreangularfire2

Answer 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();
  }