Question

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

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

＆LT; 2017年7月31日＆gt;

编辑：我最初将我的方法放在构造函数中（我不会在我的代码中使用它，而是我在这里的问题中输入错误）

应用组件

    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>

Answer 1

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

Answer 2

您不应该将您的函数放在构造函数中。相反，您应该在类中创建方法，这样您就可以在HTML模板中调用它们。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="item">One : <span id="s1" class="rs">400</span></div>
  <div class="item">Two : <span id="s2" class="rs">1200</span></div>
  <div class="item">Three : <span id="s3" class="rs">5000</span></div>
  <div class="item">Four : <span id="s4" class="rs">1096</span></div>
  <div class="item">Five : <span id="s5" class="rs">99 </span></div>
</div>
<button>Re order me</button>

Answer 3

方法不应该在构造函数内部

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 link

Answer 4

在angular内部控制器中，您可以定义$scope变量，假设您调用该变量date。

e.g。 $scope.date = new Date().getDate();

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

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

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

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

＆＃13;

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

＆＃13;

从Angular中单击更新视图

4 个答案: