如何将 observable 中的值存储在 aa 变量或属性中

Question

我一直在使用 angular 和 firebase / firestore 进行一个项目。

我有以下代码：

this.cadet = this.cadetCollection.valueChanges().subscribe(x => {
  this.cadetName = x[0].Cadet;
  this.cadetCompany = x[0].Company;
  this.cadetId = x[0].CadetId;
  return x as Cadets[];
}));

我能够将数据记录到控制台，并在我的 html 模板中通过插值使用数据。 然而，我真正需要做的是将数据存储在组件属性或变量中，以便我可以使用一些数据进行计算。

我对 angular 和 observables 还是很陌生，所以请善待:)

在发表了一些评论后，我尝试了以下操作：

    this.cadets = this.cadetCollection.valueChanges().subscribe(x => {
  this.cadetName = x[0].Cadet;
  this.cadetCompany = x[0].Company;
  this.cadetId = x[0].CadetId;
  this.cadet = x[0];
  console.log(this.cadet);
  return x as Cadets[];
});

console.log('Cadet is ' + this.cadet);

似乎该对象在 subscribe 方法中时会返回到控制台，但此后未定义。

Answer 1

但是我真正需要做的是将数据存储在组件属性或变量中，以便我可以使用一些数据进行计算。？

您正在使用异步编程，您无法暂停代码的执行，您的订阅将在未来解决，但您无法预测何时。 您可以做的是您可以将值存储在类属性中并调用 subscribe 内部的方法，以确保仅在填充 cadet 对象时才调用该方法，而不是在此之前。请参阅此内容以更好地理解。

public cadet=[];
this.cadet = this.cadetCollection.valueChanges().subscribe(x => {
 this.cadet=x;
this.myMethod(this.cadet);//your logic
}));

Answer 2

假设您在同一个组件中有一个cadet属性，您可以将x[0]分配给this.cadet ：

this.cadetCollection.valueChanges().subscribe(x => {
  this.cadet = x[0];
}));

提供新信息后的更新：

似乎该对象在 subscribe 方法中时会返回到控制台，但此后未定义。

不完全 - 订阅块中的代码异步运行，所以请花时间console.log('Cadet is ' + this.cadet); 运行，订阅块还没有被执行！

Answer 3

您有两个选择：

1. 解析器： https ://angular.io/api/router/Resolve 解析器会在请求完成后改变状态。
2. async-await ：Observable 和 Promise 是异步的，这就是为什么 subscribe 方法中的变量未定义。 使用 async-await，您将能够从本地变量中的 subscribe 获取数据。

        async myMethod(){
          this.cadet = await this.cadetCollection.valueChanges().subscribe(x => {
          this.cadetName = x[0].Cadet;
          this.cadetCompany = x[0].Company;
          this.cadetId = x[0].CadetId;
          return x as Cadets[];
        }));
        }

Answer 4

有一个用户早些时候发布了这个答案，但我不再看到它了。

我能够做的是创建一个在属性中设置值的方法，然后在 observable 的 subscribe 方法中调用该方法。

  this.cadets = this.cadetCollection.valueChanges().subscribe(x => {
  this.cadetName = x[0].Cadet;
  this.cadetCompany = x[0].Company;
  this.cadetId = x[0].CadetId;
  this.cadet = x[0];
  this.setCurrentCadet(x[0]);
  console.log(this.cadet);
  return x as Cadets[];
});

感谢所有评论并帮助我解决这个问题的人！

Answer 5

您可以按照凯文的建议简单地执行此操作：

public cadet = {} this.cadetCollection.valueChanges().subscribe(x => this.cadet = x ));

对于 cadet 的进一步操作，您所要做的就是在进行任何计算之前检查是否定义了 cadet。