從點擊角度更新視圖

我想從用戶點擊前進或後退按鈕動態更新日期，但似乎無法弄清楚如何從視圖中更改數據。從點擊角度更新視圖

變量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。如果我錯了，請原諒我，但克爾德提供的答案解決了我的問題。 –

從點擊角度更新視圖

回答

相關問題