Обновить содержимое текстового файла в div в угловых - PullRequest
Новая
       17

Обновить содержимое текстового файла в div в угловых

0 голосов
/ 20 февраля 2019

У меня есть текстовый файл на сервере, содержимое которого я хотел бы отображать в 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>

1 Ответ

0 голосов
/ 20 февраля 2019

setInterval() позволяет вызывать функцию с заданными интервалами. 

  let myText: string;

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

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

Добавьте HttpClient в ваш компонент, добавив private http: HttpClient в конструктор (он может быть открытым или закрытым).
Затем добавьте новый метод, который мы можем вызвать getText().
. В этом методе мы вызываем метод post HttpClient.
В этот момент следует отметить две важные вещи: первый параметр - это URL, гдетекстовый файл сохраняется или для доступа к нему.
Второй параметр - это объект для установки некоторых параметров: здесь мы говорим HttpClient, что сервер будет обслуживать текст вместо JSON (responseType: 'text').
, потому чтоМетоды get(), post(), delete() и put() HttpClient возвращают Observable, мы должны подписаться на него: так, для этого метода subscribe() мы передаем функцию (data => {}) для получения наших данных.
Эти данные должны где-то храниться, поэтому ранее мы создали переменную с именем myText, которая является строковой переменной.
Мы используем эту переменную для хранения наших данных, которые могут отображаться в представлении компонента.

Команда Angular предоставила учебник для изучения принципов Angular, хорошее место для начала.

...