从过滤函数更新 Firestore 集合

Question

我有一个名为 Collectors 的 firestore 集合，我通过 angularfire 与它进行交互。我可以订阅并从中过滤以获取其中的文档，尤其是 collectorBillNo（请参阅图片），但是，我被困在需要将 collectorBillNo 的值增加 1 并更新的部分当我调用 savePayment 函数时的文档。

服务组件：


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

export class CustomerService {

  tellerCollections: AngularFirestoreCollection <teller>;
  tellerDoc: AngularFirestoreDocument <teller>;
  tellers: Observable<teller[]>;

  constructor(
    public angularFireStore: AngularFirestore

  ) 
  {}

  getTeller() {
    this.tellerCollections = this.angularFireStore.collection('collector');
    this.tellers = this.tellerCollections.snapshotChanges().pipe(map(changes => {
      return changes.map( a => {
        const data = a.payload.doc.data() as teller;
        data.id=a.payload.doc.id;
        return data;
      })

    }))
    return this.tellers

    updateTeller( updateCol: teller) {
    this.tellerDoc = this.angularFireStore.doc(`collector/${updateCol.id}`);
    this.tellerDoc.update(updateCol);
  }
}

HTML 做过滤部分

<div class="bill-heads">
        <label>Teller Name: </label>
        <select  class="select-drop" 
        required
        name="tellerName" 
        (change)="loadBilling($any($event.target).value)"
        id="collector" 
        [(ngModel)]="updateLedger.collectorName">
            <option 
            class ="teller-class"
            value="{{tellerList.collectorName}}"
            *ngFor ="let tellerList of tellerList"
            >
            {{tellerList.collectorName}}
            </option>
        </select>   
       </div>

组件 ts

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { CustomerService } from 'src/app/services/customer.service'; // Service Component
import { teller } from 'src/app/models/tellermodel'; // Model
import { MatTableDataSource } from '@angular/material/table';

@Component({
  selector: 'app-teller',
  templateUrl: './teller.component.html',
  styleUrls: ['./teller.component.scss']
})
export class TellerComponent implements OnInit {
    constructor(
    private customerService: CustomerService, // Calls the AngularFire Service
  ) { }
  // Declarations goes Here
  tellerList: teller[]; // loads the collection as observable
  dataTellerSource: MatTableDataSource<any>; // for filtering
  billNo: any; // this is where the collectorBillNo will be stored upon filtering

  ngOnInit(): void {
  //Subscribe to the collection
   this.customerService.getTeller().subscribe(telObs => {
      this.tellerList = telObs; // Subsribes as an Observable
      this.dataTellerSource = new MatTableDataSource(telObs); // loads the observable as DataSource
    }) 

loadBilling(collector:string) { // performs the filter from the HTML method
    // using MatTableDatesource filter, I can able to filter the specific document,
    get its collectorBillNo
    this.collectorName = collector;
    this.dataTellerSource.filter = collector.trim().toLowerCase();
    this.billNo = this.dataTellerSource.filteredData
    .map (bn => bn.collectorBillNo)
    .reduce ((acc,cur) => acc+cur,0); // this gets the collectBillNo

  savePayment() // it should update the document and increment the collectorCode by 1
    this.billNo = this.billNo + 1
 
 /// I don't know what to do next here for it to be able to save from its respective document
  }

   
  }

Answer 1

使用 ngValue 将整个对象绑定到 HTML 中的每个 option。所选对象将附加到 select 元素的 ngModel 变量。

您似乎将 ngModel 绑定到 updateLedger.collectorName，我在组件中看不到它，所以我将创建一个名为 selectedTeller.

的新变量

<div class="bill-heads">
        <label>Teller Name: </label>
        <select  class="select-drop" 
        required
        name="tellerName"
        id="collector" 
        [(ngModel)]="selectedTeller">
            <option 
            class ="teller-class"
            *ngFor ="let teller of tellerList"
            [ngValue]="teller"
            >
            {{teller.collectorName}}
            </option>
        </select>   
</div>

注意我已经删除了 (change) 事件，因为 angular 将自动更新所选对象。

因此您的组件将如下所示

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { CustomerService } from 'src/app/services/customer.service'; // Service Component
import { teller } from 'src/app/models/tellermodel'; // Model
import { MatTableDataSource } from '@angular/material/table';

@Component({
  selector: 'app-teller',
  templateUrl: './teller.component.html',
  styleUrls: ['./teller.component.scss']
})
export class TellerComponent implements OnInit {
    constructor(
    private customerService: CustomerService, // Calls the AngularFire Service
  ) { }
  // Declarations goes Here
  tellerList: teller[]; // loads the collection as observable
  dataTellerSource: MatTableDataSource<any>; // for filtering
  billNo: any; // this is where the collectorBillNo will be stored upon filtering
  selectedTeller: teller;

  ngOnInit(): void {
  //Subscribe to the collection
   this.customerService.getTeller().subscribe(telObs => {
      this.tellerList = telObs; // Subsribes as an Observable
      this.dataTellerSource = new MatTableDataSource(telObs); // loads the observable as DataSource
    }) 

  savePayment() {
    this.customerService.updateTeller({ ...this.selectedTeller, collectorBillNo: this.selectedTeller.collectorBillNo + 1 });
  }
}

从过滤函数更新 Firestore 集合

Updating a Firestore Collection from a filtered function

typescript

angularfire

angular