从"角度中的单击"更新视图

我正在尝试通过用户单击前进或后退按钮动态更新日期，但似乎无法弄清楚如何从视图中更改数据。

变量date更改，但不会从浏览器中更改。

<七月 _x0032_017=">

示例图片

编辑：我最初将我的方法放在构造函数中(我的代码中没有这种方式，而是我在这里的问题中错误地键入了它(

应用组件

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);
}                
}

网页模板

<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>

除了不要将方法放在构造函数中之外，您还应该注意更改检测和不变性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));
}

你不应该把你的函数放在你的构造函数中。相反，您应该在类中创建方法，这将允许您在 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);

方法不应该在构造函数中

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 ));
}

工作 Plunker 链接

在控制器内部angular中，您可以定义一个$scope变量，假设您将该变量称为date。

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

然后在您的 html 中您可以访问它

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

每当您单击号召性用语按钮时，您都可以更改此$scope变量的值，一旦它发生变化，HTML 的值就会自动更新。

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

<!DOCTYPE html>
<html>
	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
	</head>
	<body>
		<div ng-app="myApp" ng-controller="myCtrl">
			<h1>{{date | date:'MMM d, y'}}</h1>
			<a href="#" ng-click="dateBack();">Back</a>
			<a href="#" ng-click="dateForward();">Forward</a>
		</div>
		<script>
			var app = angular.module('myApp', []);
			app.controller('myCtrl', function($scope) {
			    $scope.date = new Date();
			    
			    $scope.dateBack = function(){
			    	$scope.date.setDate($scope.date.getDate() - 1);
			    };
			    
			    $scope.dateForward = function(){
			    	$scope.date.setDate($scope.date.getDate() + 1);
			    };
			});
		</script>
	</body>
</html>

相关内容

最新更新

热门标签：