【问题标题】:Refresh text file contents to div in angular以角度将文本文件内容刷新到div
【发布时间】:2019-02-20 10:08:39
【问题描述】:

我在服务器上有一个文本文件,我想在 div 中显示其内容,每秒使用角度更新。我怎么能这样做?

<div>Update text file here every second</div>

这是我的代码,是这样的吗?好像不行

<!DOCTYPE html>
<html>
<body>
<script>

private http: HttpClient;

 let myText: string;

  setInterval(() => { 
      getText();
  }
  ,1000);

  getText() {
    this.http.get("https://my.text.file/textFile.txt", { responseType: "text" }).subscribe(data => {
          this.myText = data;
    });
  }
	document.getElementById("text").innerHTML =
 this.myText(); 
	
	</script>

<div id="text"></div>


<script src="//code.angularjs.org/1.2.20/angular.js"></script>

</body>
</html>

【问题讨论】:

  • 不行,正常。您不能只粘贴我给您的代码并希望它有效。在创建 Angular 应用程序之前,您需要了解 Angular 的原理和概念,在编写任何代码之前,您应该阅读tutorial

标签: html angular refresh


【解决方案1】:

setInterval() 允许以指定的时间间隔调用函数。

  let myText: string;

  setInterval(() => { 
      getText();
  }
  ,1000);

  getText() {
     this.http.get("http://api.example.com/text_file", { responseType: "text" }).subscribe(data => {
          this.myText = data;
    });
  }

通过在构造函数中添加 private http: HttpClient 将 HttpClient 注入到您的组件中(它可以是公共的或私有的)。
然后添加一个新方法,我们可以调用getText()
在该方法中,我们调用 HttpClient 的 post 方法。
此时需要注意两件重要的事情:第一个参数是存储文本文件或访问它的 URL。
第二个参数是一个设置一些选项的对象:在这里,我们告诉 HttpClient 服务器将提供文本而不是 JSON (responseType: 'text').
因为 HttpClient 的 get()post()delete()put() 方法返回一个 Observable,我们必须订阅它:所以,对于那个 subscribe() 方法,我们传递一个函数 (data =&gt; {}) 来获取我们的数据。
该数据必须存储在某个地方,因此,早些时候,我们创建了一个名为 myText 的变量,它是一个字符串变量。
我们使用该变量来存储可以在组件视图中显示的数据。

Angular 团队提供了一个tutorial 来学习 Angular 原理,这是一个很好的起点。

【讨论】:

  • 谢谢,我如何获取文本?很难在任何地方找到信息
  • 似乎找不到答案,或者我就是不明白
猜你喜欢
  • 1970-01-01
  • 2014-03-18
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多