観測可能な配列の内容を操作できますか？

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を追加し、それはありません私は私の見解

<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

免責事項に行列を示してみましょう

saveEmployee(){ 

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

     } 

を入力していない：私はAngularFirestore

に精通していませんよ

this.listBonosImponiblesの.mapは、ビューにバインドされている新しいオブジェクトを作成していますが、参照は保持しません。したがって、おそらくngModelがそれらを変更しても、実際にアクセスする方法はありません。私はあなたがそれが簡単だけで、観察を購読すると、次のようなローカルコピーを維持するために見つけるかもしれないと思う：

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

このコードはすべてこのエディタでスローされました。だから私はそれが間違いなく実行されていると言っていない。それは、一般的なアプローチのアプローチを示すより多くです。私はこれが最善のアプローチだと言っているわけではありませんが、あなたが望むところにあなたを連れていかなければなりません。反応のあるフォームを導入することで反応をさらに強めることができますが、それは必要以上に複雑になる可能性があります。