Javascript 将可观测数据转换为数组

我想把一个可观测数据转换成一个表。我可以通过在零行上搜索来显示一个表，但我希望浏览所有行以检索所有值。如何迭代所有行，而不是仅获取第一个值？ 多谢各位

export class DataComponent implements OnInit {

  constructor(private router: Router,public authService: AuthService,public dataService: DatasService) { }

 HygroS3;
 HygroS4;
 HygroS5;
 date;
 datatodisplay2;
 datatodisplay;
 data1 : any [];
 config1: GanttChartConfig;
 elementId1: string;


ngOnInit() {
    this.datatodisplay = this.dataService.getDatas();
    let interestingFields =['date','HygroS3','HygroS4','HygroS5'];
    this.datatodisplay.subscribe(val => {
     this.HygroS3 = val[0].HygroS3; 
     this.HygroS4 = val[0].HygroS4;
     this.HygroS5 = val[0].HygroS5; 
     this.date = val[0].date; 
     this.data1=[['date','HygroS3','HygroS4','HygroS5'],[this.date,this.HygroS3,this.HygroS4,this.HygroS5]]
     console.log(this.data1);
  });

  this.config1 = new GanttChartConfig(new Date (),0,0,0);
  this.elementId1 = 'myGanttChart'; 
}

我得到这个：

Array(2)
0: (4) ["date", "HygroS3", "HygroS4", "HygroS5"]
1: (4) ["24032019170117", 92, 85, 63]

---

嗯。。我不确定我是否过度简化了这种情况，或者我不完全理解您的问题，但是假设返回的可观察

val

是一个对象数组[{……}，{……}]，并且您希望返回的格式是一个数组数组[[…]，[…]]

ngOnInit() { 

  this.datatodisplay.subscribe(val => {
    const headers = ['date','HygroS3','HygroS4','HygroS5'];
    const res = val.map(row => {
      return [row['date'], row['HygroS3'], row['HygroS4'], row['HygroS5']];
    });
    this.data1 = [headers, ...res]
    console.log(this.data1);
  });

}

---

这将为您提供问题末尾提到的所需格式的数组，标题位于第一行，其他值位于后续行。

Hmm。。我不确定我是否过度简化了这种情况，或者我不完全理解您的问题，但是假设返回的可观察

val

是一个对象数组[{……}，{……}]，并且您希望返回的格式是一个数组数组[[…]，[…]]

ngOnInit() { 

  this.datatodisplay.subscribe(val => {
    const headers = ['date','HygroS3','HygroS4','HygroS5'];
    const res = val.map(row => {
      return [row['date'], row['HygroS3'], row['HygroS4'], row['HygroS5']];
    });
    this.data1 = [headers, ...res]
    console.log(this.data1);
  });

}

---

这将为您提供问题末尾提到的所需格式的数组，标题位于第一行，其他值位于后续行。

假设您有这样一个类来表示

dataservice.getData（）的返回值：

您可以简化
ngOnInit
实现，直接存储对象

data: DataToDisplay[] = [];

ngOnInit() {
  this.dataService.getDatas().subscribe((dataResponse: DataToDisplay[]) => { // assuming dataResponse is an array of your object
    this.data = dataResponse;
  });

  this.config1 = new GanttChartConfig(new Date (),0,0,0);
  this.elementId1 = 'myGanttChart'; 
}

在模板中，您可以像这样清晰地引用它：


日期
吸湿性
吸湿性
吸湿性
{{item.date}
{{item.hygross3}}
{{item.hygross4}}
{{item.hygross5}}
假设您有这样一个类来表示
dataservice.getData（）的返回值
：

您可以简化
ngOnInit
实现，直接存储对象

data: DataToDisplay[] = [];

ngOnInit() {
  this.dataService.getDatas().subscribe((dataResponse: DataToDisplay[]) => { // assuming dataResponse is an array of your object
    this.data = dataResponse;
  });

  this.config1 = new GanttChartConfig(new Date (),0,0,0);
  this.elementId1 = 'myGanttChart'; 
}

在模板中，您可以像这样清晰地引用它：


日期
吸湿性
吸湿性
吸湿性
{{item.date}
{{item.hygross3}}
{{item.hygross4}}
{{item.hygross5}}
在何处以及如何使用阵列？我在这里找不到合适的位置。@我要在上面迭代的图层。hygross3=val[0]。hygross3为了获得许多行。你想在模板中显示它吗？模板在哪里？@chupicupa只是想弄清楚，
val
的第一行总是
['date'、'hygross3'、'hygross4'、'hygross5']
？数组在哪里以及如何使用？我在这里找不到合适的位置。@我要在上面迭代的图层。hygross3=val[0]。hygross3为了获得许多行。你想在模板中显示它吗？模板在哪里？@chupicupa只是想弄清楚，
val
的第一行总是
['date'、'hygross3'、'hygross4'、'hygross5']
？