从点击角度更新视图

我想从用户点击前进或后退按钮动态更新日期，但似乎无法弄清楚如何从视图中更改数据。从点击角度更新视图

变量date发生变化，但不是来自浏览器。

< 2017年7月31日>

编辑：本来我把我的方法构造函数中的（我没有在我的代码，这样，而是我打错它在问题在这里）

应用组件

export class AppComponent { 
     date: Date; 

     constructor() { 
     this.date = new Date(); 
     } 
     dateForward() { 
     this.date.setDate(this.date.getDate() + 1); 
     } 

     dateBack() { 
     this.date.setDate(this.date.getDate() - 1); 
     }     
    }

HTML模板

<i (click)="dateBack()" class="fa fa-chevron-left" ></i> 
<a>{{date | date:'MMM d, y'}}</a> 
<i (click)="dateForward()" class="fa fa-chevron-right"></i>

来源

2017-07-30 Nathan H

除了不puting您的构造函数中你的方法，你应该注意改变检测和永恒 this.date.setDate(this.date.getDate() + 1)不会触发变化检测，强制执行，你需要this.date = new Date(this.date.setDate(this.date.getDate() + 1));，变化检测会注意到的改变只有当你改变一个不同的对象完全而不是当你设定一个对象的属性，使用数组

constructor() { 
    this.date = new Date(); 
} 

dateForward() { 
    this.date = new Date(this.date.setDate(this.date.getDate() + 1)); 
} 

dateBack() { 
    this.date = new Date(this.date.setDate(this.date.getDate() - 1)); 
}

同样的事情

来源

2017-07-30 19:47:01 Kld

你不应该把你的功能，在你的构造。相反，你应该在你的类中创建方法，这将允许你在你的HTML模板中调用它们。

public date: Date; 

constructor() { 
    this.date = new Date(); 
} 

public dateForward =() => this.date.setDate(this.date.getDate() + 1); 

public dateBack =() => this.date.setDate(this.date.getDate() - 1);

来源

2017-07-30 19:37:30 Octoverflow

方法不应该是内部构造

date :Date; 
    constructor() { 
     this.date = new Date(); 
    } 


    dateForward() { 
     this.date = new Date(this.date.setDate(this.date.getDate() + 1)); 
    } 
     dateBack() { 
     this.date = new Date(this.date.setDate(this.date.getDate() -1)); 
     }

在angular工作Plunker link

来源

2017-07-30 19:50:43

内部控制器，你可以定义一个变量$scope可以说你把那个叫可变date。

例如$scope.date = new Date().getDate();

然后在HTML中，你可以访问它

<div> {{date}} </div>

，每当你点击你的行动按钮呼叫时，可以尽快改变这种$scope变量的值，因为它会改变HTML的值会自动更新。

您可以运行以下代码来查看示例。

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
\t </head> 
 
\t <body> 
 

 
\t \t <div ng-app="myApp" ng-controller="myCtrl"> 
 

 
\t \t \t <h1>{{date | date:'MMM d, y'}}</h1> 
 

 
\t \t \t <a href="#" ng-click="dateBack();">Back</a> 
 
\t \t \t <a href="#" ng-click="dateForward();">Forward</a> 
 
\t \t </div> 
 

 

 
\t \t <script> 
 
\t \t \t var app = angular.module('myApp', []); 
 

 
\t \t \t app.controller('myCtrl', function($scope) { 
 
\t \t \t  $scope.date = new Date(); 
 
\t \t \t  
 
\t \t \t  $scope.dateBack = function(){ 
 
\t \t \t  \t $scope.date.setDate($scope.date.getDate() - 1); 
 
\t \t \t  }; 
 
\t \t \t  
 
\t \t \t  $scope.dateForward = function(){ 
 
\t \t \t  \t $scope.date.setDate($scope.date.getDate() + 1); 
 
\t \t \t  }; 
 
\t \t \t }); 
 
\t \t </script> 
 

 
\t </body> 
 
</html>

来源

2017-07-30 19:57:37

感谢您的答复，但我不知道这是有关我的问题？我使用角4，而这似乎适用于angularjs。如果我错了，请原谅我，但克尔德提供的答案解决了我的问题。 –

从点击角度更新视图

回答

相关问题