我可以操作可观察数组的内容吗？答案

【问题标题】：can I manipulate contents of an observable array?我可以操作可观察数组的内容吗？
【发布时间】：2017-10-31 15:06:59
【问题描述】：

使用 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 在其中添加一个断点并且它没有进入

    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>

【问题讨论】：

在你的例子中vaor 在哪里？请给出一致的minimal reproducible example（最好是英文，这样更容易理解应该发生的事情）。一般来说，如果你想访问一个可观察数组中的数组，请使用像.map这样的可观察运算符。
@jonrsharpe 现在修改代码，如果我将地图添加到可观察的控制台日志里面没有运行
您需要在某处订阅它。如果你没有返回 observable，只需将 map 替换为 subscribe。您实际上并没有尝试来操作数组。
如果您能阐明修改集合的目的，将会有所帮助。您是否尝试通过 AngularFirestore 保留更改？您如何从视图中获得更改？
@bygrace 我想要的是遍历集合，然后获取每个文档的 id 并更新该集合中的每个文档

标签： angular typescript rxjs angularfire2

【解决方案1】：

免责声明：我不熟悉 AngularFirestore

this.listBonosImponibles 上的 .map 正在创建新对象，这些对象被绑定到视图中，但您没有保留对它们的引用。因此，即使 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);
  });
}

所有这些代码都放在这个编辑器中。所以我并不是说它运行没有错误。更多的是展示方法的一般类型。我并不是说这是最好的方法，但它应该能让你到达你想要的地方。您可以通过引入响应式表单来使其更具响应性，但这可能比您想要的更复杂。

【讨论】：