Angular 将 Observable<any> 实现为同步字符串 [] 数组

Question

我正在尝试获取保存到 firebase 的信息并动态使用它来填充 ng2-chart 的数组。

我目前遇到的问题是 observable 不允许我填充这个数组。

getEntries(id) {
this.entries2 = this.dataService.getEntries(id);

let datesarr: string[] = [];
let arr = [];
this.dataService.getEntries(id).subscribe((entry) => {
  entry.forEach(function (x) {
    arr.push(x);
  });

  for (let i = 0; i < arr.length; ++i) {
    //  console.log(arr[i].Q1);
    let x: string = arr[i].Q1;

    // console.log(x);
    datesarr.push(x);

    //this.barChartLabels.push(x); 
//Whenever I try to push this value it encounters an error. 
  }
});
}

我是否误用了这个 observable 的订阅函数？如果是这样，我该如何解决？

之前我尝试使用以下片段：

getEntries(id) {
this.entries2 = this.dataService.getEntries(id);
let arr = [];
let datesarr: string[] = [];

this.entries2.forEach(function (entry) {
  entry.forEach(function (x) {
    arr.push(x);
  });
  for (let i = 0; i < arr.length; ++i) {
    
    let x: string = arr[i].Q1;
    
    datesarr.push(x);
    //this.barChartLabels.push(x);
  }
});

我认为问题是这个 observable 是异步的并且 barchartlabels 行推送“未定义”而不是任何真实数据。

条目 2 定义为：

   entries2: Observable<any>;

barchartlabels 只是一个空数组我正在尝试将数据推送到：

public barChartLabels: Label[] = [];

从dataService中的数据库中获取信息的代码是：

  getEntries(id){
   return  this.db.collection(`users/${id}/entries`).valueChanges();
  }

有人可以为我指出正确的方向来解决这个问题吗？

注意：我尝试研究主题，但不确定它们是否适合我的代码，因为返回流的最后一个值似乎不太有用。

Answer 1

这似乎是类型问题。 this.barChartLabels 需要一个标签数组，如您所指

this.barChartLabels: Label[] = [];

所以您只需尝试将 x 数据转换为标签：

getEntries(id) {
this.entries2 = this.dataService.getEntries(id);

let datesarr: string[] = [];
let arr = [];
this.dataService.getEntries(id).subscribe((entry) => {
  entry.forEach(function (x) {
    arr.push(x);
  });

  for (let i = 0; i < arr.length; ++i) {
    //  console.log(arr[i].Q1);
    let x: string = arr[i].Q1;

    // console.log(x);
    datesarr.push(x);

    this.barChartLabels.push(x as Label); // note as Label 

  }
});
}

Angular 将 Observable<any> 实现为同步字符串 [] 数组

Angular implement Observable<any> as synchronous string[] array

observable

behaviorsubject

ng2-charts

angular