Question

使用AngularFireStrore我得到一个集合并将其分配给一个可观察的数组。然后在一个按钮激活的功能中，我想修改该集合。我试图通过以下方式进行，但它向我表明vaor是一种可观察的类型。

private listBonosImponibles: AngularFirestoreCollection<EmployeeBonos>;

  unBonosImponibles: Observable<EmployeeBonos[]>;

  constructor(private afs: AngularFirestore, private route: ActivatedRoute) { 
    this.listBonosImponibles = this.itemDoc.collection<EmployeeBonos>('bonosImponibles');


    this.unBonosImponibles = 
    this.listBonosImponibles.snapshotChanges().map(actions => {
      return actions.map(a => {
        const data = a.payload.doc.data() as EmployeeBonos;
        const id = a.payload.doc.id;
        return { id, ...data };
      });
    });



   }

我成功地在构造函数中获取了我的集合，现在如果我想显示由控制台获得的数组，它没有显示任何内容，因为它没有进入console.log在其中添加一个breackpoint并且它没有输入

    saveEmployee(){

      this.unBonosImponibles.map((dat: any) => {
       console.log(dat);
       this.listBonosImponibles.doc(dat.id).update(dat);
       });

      }

这就是我在视图中显示矩阵的方式

<div *ngFor="let bonoImpo of unBonosImponibles | async" fxLayout="row" >
  <label fxFlex="70" >{{ bonoImpo.nombre }}</label>
  <mat-form-field class="ml-5"  >
  <input matInput [(ngModel)]="bonoImpo.valor"   />
 </mat-form-field>
</div>
<button mat-raised-button (click)="saveEmployee()" color="primary">Guardar</button>

Answer 1

免责声明：我不熟悉AngularFirestore

.map上的this.listBonosImponibles正在创建绑定到视图的新对象，但您没有保留对它们的引用。因此，即使ngModel可能会更改它们，您也无法真正访问它们。我认为您可能会发现订阅observable更容易，并保留如下的本地副本：

private listBonosImponibles: AngularFirestoreCollection<EmployeeBonos>;

  unBonosImponibles: EmployeeBonos[];

  constructor(private afs: AngularFirestore, private route: ActivatedRoute) { 
    this.listBonosImponibles = this.itemDoc.collection<EmployeeBonos>('bonosImponibles');

    listBonosImponibles.snapshotChanges().subscribe(actions => {
      this.unBonosImponibles = actions.map(a => {
        const data = a.payload.doc.data() as EmployeeBonos;
        const id = a.payload.doc.id;
        return { id, ...data };
      });
    });
  }
}

删除视图中的异步：

<div *ngFor="let bonoImpo of unBonosImponibles" fxLayout="row" >

迭代保存：

saveEmployee(){
  this.unBonosImponibles.forEach((dat: any) => {
    console.log(dat);
    this.listBonosImponibles.doc(dat.id).update(dat);
  });
}

所有这些代码都在这个编辑器中抛出。所以我并不是说它没有错误地运行。更多的是显示一般类型的方法。我不是说这是最好的方法，但它可以让你到达你想要的地方。你可以通过引入反应形式来更加反应，但这可能比你想要的更复杂。

我可以操纵可观察数组的内容吗？

1 个答案: