如何通過角度的ES6「類」功能傳遞數據

Question

請注意，我在這方面有點綠，請與我一起裸照。

我試圖創建一個角度爲ES6類的控制器。這按預期工作（能夠打印通過消息功能返回的字符串）。見下文。

<div ng-controller="ProfilingCtrl as profileData"> 
    {{profileData.message()}} 
</div> 

但是現在我想要做的是能夠在ng-repeat中使用函數類，如下所示。

<div ng-controller="ProfilingCtrl as profileData"> 
    <div ng-reapeat="x in profileData.getData()"> 
     {{x[0]}} 
    </div> 
</div> 

getData（）是一個返回字符串數組的函數。這甚至有可能嗎？如果不是，那麼怎麼去做這樣的操作呢？

在此先感謝。

Answer 1

您的問題很有可能來自ng-reapeat - >錯字應該是ng-repeat。仍然幫助您處理您的代碼：

如果您分享了您的控制器代碼，這將非常有用。但我會做點什麼。首先，除非您試圖在數據數組中顯示每個字符串的第一個字符，否則刪除[0]，因爲x表示迭代產生的元素。

<div ng-controller="ProfilingCtrl as profileData"> 
    <div ng-repeat="x in profileData.getData()"> 
     {{x}} 
    </div> 
</div> 

更多推薦：將您的數據綁定到變量而不是函數。 ES6風格（雖然我仍然堅持功能的控制器）

class MyController { 

    constructor(myDataService) { 
    this.myDataService = myDataService; 

    this.myData = []; // This is where the data will be 
    } 

    handleError(error) { 
    // do something error 
    } 

    getData() { 
    this.myDataService.getData() // this is some method that returns a promise 
     .then(response => this.myData = response) // response from http in a promise 
     .catch(error => this.handleError(error)); 
    } 

    $onInit() { // angular will take care of starting this off 
    this.getData(); 
    } 

} 

注意$的OnInit被稱爲角時，該組件已準備就緒。閱讀關於生命週期鉤子的問題：https://toddmotto.com/angular-1-5-lifecycle-hooks

生命週期鉤子超出了您的問題範圍，但仍然很好進入。

請注意，不建議先前對「將其綁定到$scope」做出的評論。 ControllerAs如你所做的更好，稍後可以放在其他地方。