Question

如何在HTML页面上的Var jsonText中打印数据。 我们如何访问局部变量中的数据并将其打印在HTML页面上。我们可以通过哪种方法访问所有本地数据？这是将CSV数据解析为JSON然后获取数据的代码......

export class ProductListComponent  {


        }
ngOnInit(): void { 

}

 public fileChangeEvent(event: any){
      if (event.target.files && event.target.files[0]) {
      const reader = new FileReader();
      reader.onload = () => {
      let text = reader.result;
      this.finalDataToBePassed(text);
      return JSON.stringify(text);
  };

  reader.readAsText(event.target.files[0]);

    }
} 


public finalDataToBePassed(text:any){
 var lines = text.split("\n");
      var duplicates= [];
      var result = []; 
      var counts = {};
      var headers = lines[0].split(",");
      for (var i = 1; i < lines.length; i++) {
          var line = lines[i];
        // Line breaks where messing up with the ADDRESS property. 
        //Just removing  all line breaks before using the strings
          line = line.replace(/(\r\n|\n|\r)/gm,"");
          lines[i] = line;
            var obj = {};
            var currentline = lines[i].split(",");
             for (var j = 0; j < headers.length; j++) {
          var header = headers[j];
          header = header.replace(/(\r\n|\n|\r)/gm,"");
          headers[j] = header;
          obj[headers[j]] = currentline[j];
        }
        result.push(obj);
    }
    var jsonText= JSON.stringify(result); // printing this to HTML page when the scope is local ?????

return result;
}

Answer 1

首先，我看到你的所有功能都在你的类组件之外。他们应该在里面。实际上，我不知道你怎么没有得到编译错误。

其次，Angular2没有范围。你的意思是如何使组件的HTML /视图可以访问变量。

您可以通过声明如下变量来执行此操作：

export class ProductListComponent  {
private myJson: any;

public fileChangeEvent(event: any){
  if (event.target.files && event.target.files[0]) {
  const reader = new FileReader();
  reader.onload = () => {
    let text = reader.result;
    this.myJson = this.finalDataToBePassed(text); //this is where you give a value to your class variable 
    return JSON.stringify(text);
 };

 reader.readAsText(event.target.files[0]);

 }
} 

....
}

然后，您转到视图/ html并使用插值（例如{{myJson}}）或其他技术显示它。

希望这有帮助。

如何在功能级别获取JSON并在Angular2中的HTML页面上显示

1 个答案: