Как я могу отображать дату и время в шаблоне Angular и обновлять его? - PullRequest
Новая
       5

Как я могу отображать дату и время в шаблоне Angular и обновлять его?

0 голосов
/ 06 июля 2018

Мне нужно отображать дату и время в моем угловом шаблоне и обновлять его, чтобы при изменении времени показывать измененное время курса, приложение ДОЛЖНО выглядеть следующим образом:

это мой код шаблона .html: 

<div class="top-right pull-right">
  <button type="button" class="btn xbutton-rectangle" (click)="logOut()">
    <div class="icon-user pull-left">
      <i class="fas fa-user fa-fw"></i>
      <span class="button-text">{{employee.FullName}}</span>
    </div>
    <div class="time-date pull-right">
      <p class="button-time">08:55</p>
      <p class="button-date">22.06.2018</p>
    </div>
  </button>
</div>

Мой .ts файл: 

@Component({
  selector: 'main-screen',
  templateUrl: './main-screen.component.html',
  styleUrls: ['./main-screen.component.css']
})
export class MainScreenComponent implements OnInit {

  constructor() {
  }

  ngOnInit() {
    //.. some methods 
  }

  ngOnDestroy() {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }

  logOut() {
    this._globals.isAuthenticated = false;
    this._globals.loggedInUser = null;
    this._globals.token = null;
  }

}

Так как я могу отображать дату и время? и обновлять его при изменении системной даты и времени?

Ответы [ 3 ]

0 голосов
/ 06 июля 2018

Просто добавьте новую функцию в ваш компонент, как это 

    @Component({
      selector: 'main-screen',
      templateUrl: './main-screen.component.html',
      styleUrls: ['./main-screen.component.css']
    })
    export class MainScreenComponent implements OnInit {

      constructor() {
      }

      ngOnInit() {
          this.utcTime();
      }

      ngOnDestroy() {
        this.ngUnsubscribe.next();
        this.ngUnsubscribe.complete();
      }

       utcTime(): void {
        setInterval(function() {
            this.myDate = new Date();
            console.log(this.myDate); // just testing if it is working
        }, 1000);
    }

      logOut() {
        this._globals.isAuthenticated = false;
        this._globals.loggedInUser = null;
        this._globals.token = null;
      }

Затем измените формат даты по своему усмотрению, используя угловой канал Дата

0 голосов
/ 06 июля 2018

Все, что вам нужно сделать, это использовать setInterval в вашем конструкторе 

  date:Date; 
  constructor(){
    setInterval(() => {
      this.date = new Date()
    }, 1000)
  }

И использовать канал даты для форматирования даты и времени 

{{date   | date: "mm-dd-yyyy"}}
{{date   | date: "HH:mm:ss"}}

Демо

0 голосов
/ 06 июля 2018

Вы должны присвоить переменную дате и обновлять ее каждые 0,1 секунды, например 

public today = Date.now();

 setInterval(() => {
      this.today = Date.now();
    }, 100);

Вы можете отобразить его в своем HTML, например, если вы хотите часы и минуты, например: 

{{today | date:'HH:mm' }}

Посмотрите на https://angular.io/api/common/DatePipe для другого формата даты

...