CODEWITHSUNDEEP
angulartypescriptrxjsangularfire2
Luis Ruiz Figueroa
Luis Ruiz Figueroa

Reputation: 2577

can I manipulate contents of an observable array?

working with AngularFireStrore I get a collection and assign it to an observable array. then in a function activated by a button I want to modify that collection. I am trying to do it in the following way but it indicates to me that vaor is an observable type.

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 };
      });
    });



   }

I successfully get my collection inside the constructor and now if I want to show the array obtained by console, it does not show anything since it does not enter the console.log add a breackpoint in it and it does not enter

    saveEmployee(){

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

      }

that's how I show the matrix in my view

<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>

Upvotes: 1

Views: 851

Answers (1)

bygrace
bygrace

Reputation: 5988

Disclaimer: I'm not familiar with AngularFirestore

The .map on your this.listBonosImponibles is creating new objects which are being bound the view but you don't keep a reference to them. So even though ngModel probably changes them you don't really have a way to access them. I think that you might find it easier to just subscribe to the observable and keep a local copy like the following:

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 };
      });
    });
  }
}

Remove the async in the view:

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

Iterate on save:

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

All this code was thrown together in this editor. So I'm not saying it runs without error. It is more to show the general type of approach. I'm not saying that this is the best approach but it should get you where you want. You could go more reactive on it by introducing reactive forms but that may be more complicated than you want.

Upvotes: 1

Related Questions