首页 > 解决方案 > 在 Angular/Firestore CRUD 的更新部分填写字段

问题描述

我的要求非常简单,但我无法解决或找到 Firestore 的解决方案。

我特别想根据 url 中发送的 id 在表单中显示当前字段条目。我也认为它也没有正确地获得“where”条件。

即文你来编辑条目我试图让它在其字段中显示“域”值以根据 url 中发送的 id 进行编辑。

ts文件:

form = new FormGroup({
    domain: new FormControl(""),
  });

  constructor(
    private aptService: DomainService,
    private actRoute: ActivatedRoute,
    private router: Router,
    public fb: FormBuilder,
    public authService: AuthenticationService,
    public fireStore: AngularFirestore
  ) {
    this.id = this.actRoute.snapshot.paramMap.get('id');
    const docRef = this.fireStore.collection("qm-domain", (ref) =>
      ref.where("id", "==", this.id)
    );
    docRef.snapshotChanges().subscribe((res) => {
      this.form.setValue(res);
    })
  }

.html 文件:

<form [formGroup]="form" (ngSubmit)="updateForm()">
      <ion-item>
        <ion-label position="floating">Domain</ion-label>
        <ion-input formControlName="domain" type="text" required></ion-input>
      </ion-item>
      <ion-row>
        <ion-col>
          <ion-button type="submit" color="primary" shape="full" expand="block">Update Domain</ion-button>
        </ion-col>
      </ion-row>
    </form>

标签: angulargoogle-cloud-firestore

解决方案


我终于弄明白了。

对于遇到同样问题的其他人,这就是我所做的:

    form = new FormGroup({
    domain: new FormControl(""),
  });

  constructor(
    private aptService: DomainService,
    private actRoute: ActivatedRoute,
    private router: Router,
    public fb: FormBuilder,
    public authService: AuthenticationService,
    public fireStore: AngularFirestore
  ) {
    this.id = this.actRoute.snapshot.paramMap.get("id");
    // get the record based on this.id
    const docRef = this.fireStore
      .collection("qm-domain")
      .doc(this.id)
      .snapshotChanges();
    // put it in the form
    docRef.subscribe((res) => {
      this.form.setValue(res.payload.data());
      console.log(res.payload.data());
    });
  }

推荐阅读