Преобразуйте наблюдаемое в массив

Question

Я хочу превратить наблюдаемое в таблицу. Я могу отобразить таблицу, выполнив поиск по нулевой строке, но я хотел бы просмотреть все строки, чтобы получить все значения. Как я могу перебрать все строки вместо того, чтобы просто получить первое значение? спасибо

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]

Answer 1

Предполагая, что у вас есть такой класс для представления возвращаемого значения DatasService.getData():

class DataToDisplay {
  date: Date | string;
  HygroS3: number;
  HygroS4: number;
  HygroS5: number;
}

Вы можете немного упростить реализацию 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'; 
}

в вашем шаблоне вы можете ссылаться на него чисто так:

<table>
    <tr>
        <th>Date</th>
        <th>HygroS3</th>
        <th>HygroS4</th>
        <th>HygroS5</th>
    </tr>
    <tr *ngFor="let item of data">
        <td>{{item.date}}</td>
        <td>{{item.HygroS3}}</td>
        <td>{{item.HygroS4}}</td>
        <td>{{item.HygroS5}}</td>
    </tr>
</table>

Answer 2

Хм .. Я не уверен, упрощаю ли я эту ситуацию, или я не совсем понимаю ваш вопрос, но предполагаю, что возвращаемая наблюдаемая 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);
  });

}

Thisдаст вам массив в том формате, который вы упомянули в конце вопроса, с заголовками в первой строке и другими значениями в последующих строках.