Angular js当前日期显示问题

时间:2017-12-18 10:06:33

标签: angularjs ng-bootstrap

我是 Angularjs ng-bootstrap的初学者。我创建了一个示例网站,并为我的网站添加了导航。它工作得很好,但是我有一些问题,我试图将当前日期显示为 2017-12-18 这个没有显示,我想知道如何添加正确到我的网站 我跟着这个Angularjs - display current date

应用-navbar.component.html

       <div ng-app ng-controller="Ctrl">
          {{date | date:'yyyy-MM-dd'}}<br/>
        </div>

    <script>
  function Ctrl($scope)
   {
    $scope.date = new Date();
     }
    </script>

应用-navbar.component.ts

import { Component, OnInit } from '@angular/core';

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

      constructor() { }

      ngOnInit() {
      }

    }

3 个答案:

答案 0 :(得分:1)

从模板中删除脚本标记,然后像这样更新组件:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-navbar',
  templateUrl: './app-navbar.component.html',
  styleUrls: ['./app-navbar.component.css']
})
export class AppNavbarComponent implements OnInit {
  public date = new Date()
  constructor() { }

  ngOnInit() {
  }

}

答案 1 :(得分:1)

import { Component, OnInit } from '@angular/core';

    @Component({
      selector: 'app-navbar',
      templateUrl: './app-navbar.component.html',
      styleUrls: ['./app-navbar.component.css']
    })
    export class AppNavbarComponent implements OnInit {
      public date = new Date();
      constructor() { }

      ngOnInit() {
      }

    }

试试这个。有关格式,请参阅:https://loiane.com/2017/08/angular-tips-formatting-dates-with-a-custom-date-pipe-dd-mm-yyyy/

答案 2 :(得分:1)

你通过angular2混合angularjs 你的 app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-navbar',
  templateUrl: './app-navbar.component.html',
  styleUrls: ['./app-navbar.component.css']
})
export class AppNavbarComponent implements OnInit {
  constructor() { }
  date = new Date();
  ngOnInit() {
  }

}

您的 app-navbar.component.html

 <div ng-app ng-controller="Ctrl">
          {{date | date:'yyyy-MM-dd'}}<br/>
        </div>