AngularFireStore 更新的替代语法或逻辑？

Question

我想询问在组件 ts 内的 firestore 中实现更新数据的替代方法。

通常我会使用服务并通过它订阅，但是订阅和使用服务变得太慢，我们的应用程序崩溃，因为我们的数据团队由于数据迁移注入了大约 20k+ 条记录。

通常我会按照老方法进行以下操作：


Via Service:


import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument} from '@angular/fire/compat/firestore';
import { Observable } from 'rxjs';
import {map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})

export class CustomerService {
  customerCollection: AngularFirestoreCollection <Customer>;
  customerDoc: AngularFirestoreDocument <Customer>;
  customers: Observable<Customer[]>;

   constructor(
    public angularFireStore: AngularFirestore

  ) 
  {}

    getCustomer() {
    this.customerCollection = this.angularFireStore.collection('customer');
    this.customers = this.customerCollection.snapshotChanges().pipe(map(changes => {
      return changes.map( a => {
        const data = a.payload.doc.data() as Customer;
        data.id=a.payload.doc.id;
        return data;
      })

    }))
    return this.customers;
  }

  addCustomer(customerAdd:Customer) {
    this.customerCollection.add(customerAdd);
  };

  updateCustomer(custcol : Customer) {
    this.customerDoc = this.angularFireStore.doc(`customer/${custcol.id}`);
    this.customerDoc.update(custcol);
  }


}

通常在我的组件 TS 旧代码 中，我通常只是将更新放在这样的函数上。

 customerList: customerModel[];
 customerDetails : customerModel;
 customerName: any;
 
 addCustomer : Customer ={
    customerNo: '',
    customerAccountNo: '',
    customerName: '',
    customerAddress: '',
    customerContactNo: '',
    customerEmail: ''

  };

ngOnInit(): void {
 this.customerService.getCustomer().subscribe( customerObservable => {
 this.customerList = customerObservable});
}


add() {
 this.addCustomer.customerName = this.customerName //(input comes from ngModel btw)
 this.customerCollection.add(this.addCustomer);
}

update(){
 this.customerDetails.customerName = this.customerName //(input comes from ngModel btw)
 this.customerService.UpdateCustomer(this.customerDetails)
}

当我们只有 6000 多条记录时，这可以正常和顺利地工作，但是如上所述，在注入额外的记录后加载甚至更新变得迟缓。

通过解决方案搜索，我们停止使用该服务，而是将所有内容放入组件中，我设法实现了 Query（但我相信只有 ValueChanges，以便更新我应该使用 SnapshotChanges) 和 Adding，但是即使在官方 AngularFireStore 文档中，Update 的文档也很少或根本没有，这就是为什么我正在为这一个而苦苦挣扎 syntax/logic。

这是我更新的组件 TS 代码

import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from '@angular/fire/compat/firestore';
import { Observable} from 'rxjs'; 
import { Customer } from '../../models/customer.model';


@Component({
  selector: 'app-add-client',
  templateUrl: './add-client.component.html',
  styleUrls: ['./add-client.component.scss']
})
export class AddClientComponent implements OnInit {

 private customerCollection: AngularFirestoreCollection<Customer>
 private customerDocs: AngularFirestoreDocument<Customer>
 customers: Observable<Customer[]>
  
 constructor(
    public afs: AngularFirestore
  ) { 
    this.customerCollection = this.afs.collection<Customer>('customer')
    this.customers = this.customerCollection.valueChanges();
  }
 customerList: Customer[];
 customerDetails: Customer;

 addCustomer : Customer ={
    customerNo: '',
    customerAccountNo: '',
    customerName: '',
    customerAddress: '',
    customerContactNo: '',
    customerEmail: ''
 
  };

queryCustomer() {
    
    this.customerCollection = this.afs.collection('customer',
    ref => ref
    .orderBy('customerName')
    .startAt(this.query)
    .endAt(this.query + "\uf8ff"));
    this.customers = this.customerCollection.valueChanges();
    this.customers.subscribe(
     (data) => (this.customerList = (data)));
  }

add() {
  this.addCustomer.customerName = this.customerName;
  this.customerCollection.add(this.addCustomer);
}

queryCustomer() {
    
    this.customerCollection = this.afs.collection('customer',
    ref => ref
    .orderBy('customerName')
    .startAt(this.query)
    .endAt(this.query + "\uf8ff"));
    this.customers = this.customerCollection.snapshotChanges().pipe(map(changes =>{
        return changes.map(a =>{
        const data=a.payload.doc.data() as depositModel;
        data.id=a.payload.doc.id;
        return data;
       });
      }
    ));
    this.customers.subscribe(
     (data) => (this.customerList = (data)));
  }


}

我做了以下尝试，但不知为何它们不起作用


update() {
 
  this.customerDocs = this.angularFirestore.doc(`jobOrders/${customerDetails.id}`);
  this.customerDocs.Update(customerDetails);

}

我对这种实现真的很陌生，希望有人能在这方面帮助我。谢谢。

Answer 1

如 example1 and example2 中所述，更新可按以下方式完成：

Example1 :

onRename() {
        if (!this.editForm.value.replaceValue) {
            this.message = "Cannot Be Empty!";
        } else {
            this.firestore.collection('testCollection').doc(this.id).update({ field: this.editForm.value.replaceValue });
            this.edit = false;
            this.message2 = '';
            this.single = null;
        }
    }

Example2 :

updateCoffeeOrder(data) {
   return
       this.firestore
       .collection("coffeeOrders")
       .doc(data.payload.doc.id)
       .set({ completed: true }, { merge: true });
}

CRUD操作可以参考 and video

AngularFireStore 更新的替代语法或逻辑？

Alternative Syntax or Logic for AngularFireStore Update?

typescript

angularfire2

angular

google-cloud-firestore