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

Posted 2023-03-16

【中文标题】Angular 将 Observable<any> 实现为同步字符串 [] 数组

【英文标题】：Angular implement Observable<any> as synchronous string[] array

【发布时间】：2021-12-13 10:30:38

【问题描述】：

我正在尝试获取保存到 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 的订阅功能？如果是这样，我该如何解决？

之前我尝试使用以下sn-p：

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 行推送“未定义”而不是任何真实数据。

entries2 定义为：

   entries2: Observable<any>;

barchartlabels 只是一个空数组，我试图将数据推送到：

public barChartLabels: Label[] = [];

在dataService中从db中获取信息的代码是：

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

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

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

【问题讨论】：

你能指定你得到的错误吗？

我猜是类型问题，barChartLabels 需要一个 Label 数组。尝试对 Label => let push 进行强制转换： Label = x as Label; this.barChartLabels.push(pushed);

是的，就是类型错误。旁注，我是否正确使用订阅？我对 observables 和 angular 还是很陌生。

是的，它是正确的：虽然我会小心内存泄漏你应该有一个属性私有子：订阅。然后你像这样影响它： this.sub = this.dataService.getEntries(id).subscribe(.... 然后你在 ngOnDestroy 中取消订阅它： if (this.sub) this.sub.unsubscribe() 跨度>

【参考方案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 

  
);

【讨论】：

天哪，谢谢！

好吧，这只是我的第一个猜测：类型问题。我正在编辑答案以更清楚

您也可以使用 '''typescript ''' 添加语法着色（使用勾号 ` 而不是引号'