Angular 花了很多时间来更新我的firebase项目的字段_Angular_Firebase

Angular 花了很多时间来更新我的firebase项目的字段

angular firebase

Angular 花了很多时间来更新我的firebase项目的字段,angular,firebase,Angular,Firebase,好吧，让我来解释一下。在我的项目中，我有一个页面，我应该在其中更新firebase项目中集合的值。因此，我的代码在第一次单击模板中的按钮时就纠正了这一点，但在第二次单击时，它会再次更新，并不断更新firebase集合中的字段，直到页面发生冲突或需要很长时间才能更新 <div class="card mt-5 pt-5" *ngFor="let p of pizzas | async"> <p class="card-tit

好吧，让我来解释一下。在我的项目中，我有一个页面，我应该在其中更新firebase项目中集合的值。因此，我的代码在第一次单击模板中的按钮时就纠正了这一点，但在第二次单击时，它会再次更新，并不断更新firebase集合中的字段，直到页面发生冲突或需要很长时间才能更新

<div class="card mt-5 pt-5" *ngFor="let p of pizzas | async">
  <p class="card-title">{{p.nome}}</p>
  <p>{{p.id}}</p>
  ```<button (click)="UpdateProducts(p.id)">Update</button>
 </div>

</div>
//Object Pizza: 
  {
   nome: "", 
   ingredients: ["tomato sauce", "Mozzarela", ...],
   quantity: ["300", "400",...]
  }
  

  > Objective of the code: Since i use a certain quantity of each ingredient in a pizza i can update each product in the database mapping the ingredient array with the quantity array.
ex: stock of mozzarela in the DB has 4000g, if i map ingredient[1] and quantity[1] i will have product Mozzarela: [4000 - 400] in the DB. Which means that Product Mozzarela equal to 3600g. 

export class TestePizzaComponent implements OnInit {
pizzas: any = ""
id: string = ""

quantity: Array<any> = []
prod: any
constructor(private afire: AngularFirestore, 
  private serv: ProductService,
  private route: Router) { }


ngOnInit(): void {
  this.pizzas = this.afire.collection<any>("pizza").snapshotChanges()
    .pipe(
      map(changes => changes.map(a => {
        var id = a.payload.doc.id
        var data = a.payload.doc.data()
        return { id, ...data }
      }))
    )

}
atualizar(id: string) {

var quantArry = []
var ing = []
var quant = [] 
this.afire.doc<any>('pizza/' + id).valueChanges()
.pipe(
  map(value => {
    ing = value.ingredientes.split(",")
    quant = value.quantidade.split(",")
    for (let q of quant) {
      quantArry.push(q);
    }
      return { ing, quantArry }
  })
).subscribe(
   value => {
    for (let val of value.ing) {
      this.afire.collection('products', ref => ref.where('nomeProduto', 
'==', val))
        .valueChanges().subscribe(
           v => {
            this.prod = v[0]
            this.prod.quantidadeEstoque = quant[ing.indexOf(val)]
             this.serv.update(this.prod, this.prod.id)
            //this.prod = null
          })```


{p.nome}
{{p.id}}
```更新
//对象比萨饼：
{
名称：“，
配料：[“番茄酱”、“莫扎雷拉”、…]，
数量：[“300”、“400”、…]
}
>代码的目标：因为我在比萨饼中使用了一定数量的每种配料，所以我可以更新数据库中的每种产品，将配料数组映射到数量数组。
例如：数据库中的mozzarela库存为4000g，如果我映射成分[1]和数量[1]，那么数据库中的产品mozzarela:[4000-400]。这意味着产品Mozzarela等于3600g。
导出类TestePizzaComponent实现OnInit{
比萨饼：任何=“”
id:string=“”
数量：数组=[]
普罗德：有吗
建造商（私人火灾：AngularFirestore，
私人服务：产品服务，
专用路由：路由器{}
ngOnInit（）：void{
this.pizzas=this.afire.collection（“pizza”）.snapshotChanges（）
.烟斗(
map（changes=>changes.map（a=>{
var id=a.payload.doc.id
var data=a.payload.doc.data（）
返回{id，…data}
}))
)
}
atualizar（id:string）{
var quantArry=[]
变量ing=[]
var quant=[]
this.afire.doc（'pizza/'+id）.valueChanges（）
.烟斗(
映射（值=>{
ing=value.ingredientes.split（“，”）
quant=value.quantidade.split（“，”）
for（让q表示数量）{
定量推送（q）；
}
返回{ing，quantArry}
})
).订阅(
值=>{
for（让value.ing的值）{
此.afire.collection（'products'，ref=>ref.where（'nomeProduto'），
“=”，val））
.valueChanges（）.subscribe(
v=>{
this.prod=v[0]
this.prod.quantidadeEstoque=quant[ing.indexOf（val）]
this.serv.update（this.prod，this.prod.id）
//this.prod=null
})```

我没有完全遵循所有的逻辑，它是意大利语（？）的组合，而不是最好的格式

主要问题是在调用

atualizar（）

的单击事件上，它创建了一个对pizza对象（？）的

valueChanges

订阅，您从未取消订阅，您正在对数据进行处理，然后您创建了一个对集合的valueChange订阅（您也从未取消订阅）它过滤产品，在其中您最终调用

this.serv.update（this.prod，this.prod.id）

我猜

this.serv.update（this.prod，this.prod.id）

正在对pizza对象或产品集合进行更改，并且由于您从未取消订阅valueChanges，它们会被反复调用，每次单击并再次运行

atualizar（）

时，您都在添加另一个无休止的订阅循环

我真的没有时间修复您的所有代码（如果没有确切的firebase设置，无论如何都很难修复），但是上面的描述和这些提示我希望能帮助您找到正确的方向：

在firebase中使用

valueChanges

不仅可以获取对象，还可以获取对象并在每次更改时保留一个打开的订阅。您可以使用

take（1）

rxjs管道/操作符来正确管理订阅

由于您在单独的调用中从服务器获取多个对象，您可能希望使用rxjs

switchMap

来帮助管理订阅。在您的情况下，看起来您在for循环中触发了多个其他请求，因此在这种情况下可能不合适，可能需要某种组合运算符或者（我不确定哪一个适合您的用例，但它们都列在这里：）

下面是一个使用

take（1）

结束比萨饼文档订阅的示例：

this.afire.doc<any>('pizza/' + id).valueChanges()
.pipe(
   map(values => {
    // some stuff..
    return { ing, quantArry }
   }),
   take(1)
).subscribe(val)

this.afire.doc（'pizza/'+id）.valueChanges（）
.烟斗(
映射（值=>{
//一些东西。。
返回{ing，quantArry}
}),
采取（1）
).订阅（val）