Question

我正在尝试填充二维数组 tableData ，该数组的每一行都通过GET调用获取。但是在完成数组填充后，结果不会在组件的html前端反映为结果。其呈现为空白。

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DataFetch } from './dataFetch';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  header: DataFetch ;
  header1 : string[];
  header2 : string[];
  tableData : string[][];
  constructor(private http: HttpClient) {}
  ngOnInit() {
  this.http.get('assets/table-header.json').subscribe((data : DataFetch) => {this.header1 = data["header1"];});
  this.http.get('assets/table-header.json').subscribe((data : DataFetch) => {this.header2 = data["header2"];});
 let i =1;
 this.tableData=[];
 do{
   let str = "row["+i+"]";
   this.http.get('assets/table-data.json').subscribe((data : DataFetch) => {
     let j = 0;
     this.tableData[i]=[];
     for(let item in data[str])
     {
       this.tableData[i][j]=item;
       j = j+1;
     }
    });
   i = i+1; 
}while(i<5);
  }
}

正在使用的json文件为（table-data.json）：

{
    "row[1]": ["21/12/2018 15:00:01", "21/12/2018 15:10:03", "10", "M1X",
        "setr.010.001.04", "BB",
        "BB", "DFDS", "0000000013715338", "0000000013715338"
    ],
    "row[2]": ["21/12/2018 15:00:01", "21/12/2018 15:10:03", "10", "M2X",
        "setr.010.001.04", "BB",
        "BB", "DFDS", "0000000013715338", "0000000013715338"
    ],
    "row[3]": ["21/12/2018 15:00:01", "21/12/2018 15:10:03", "10", "M3X",
        "BB",
        "BB", "DFDS", "0000000013715338", "0000000013715338"
    ],
    "row[4]": ["21/12/2018 15:00:01", "21/12/2018 15:10:03", "10", "M4X",
        "BB",
        "BB", "DFDS", "0000000013715338", "0000000013715338"
    ]
}

相应的前端html组件（呈空白）为：

<div style="text-align:center">
data is {{tableData[1][1]}}
</div>

DataFetch类定义为：

export class DataFetch
 {
 public header1: string[]=[];
 public header2 : string[]=[];
 public row: string[][];
 }

header1 和 header2 可以在输出渲染中正常工作。正在使用角度版本4。有任何代码更正建议吗？

如何使用GET服务器调用每一行在Angular4中填充2D数组？

0 个答案: