如何使用 angular-fullstack 从 $onInit() 中定位构造数组答案

【问题标题】：How to target constructed array from within $onInit() using angular-fullstack如何使用 angular-fullstack 从 $onInit() 中定位构造数组
【发布时间】：2016-04-29 09:05:45
【问题描述】：

我正在开发一个使用 Babel 和 Angular 1.5.0 的 Angular 全栈项目。

问题是，当我构建一个数组 (this.events = []) 时，我无法将此数组定位在 $onInit() 上，我应该在其中填充要在 ui 日历上显示的数据。我在 this.awesomeTesting = [];

所以我需要使用 $onInit() 中的 $http.get('/api/calendars/') 中的数据填充 this.events[] 数组，但我不明白为什么我不能定位数组，所以我可以填充数据。

我做错了什么？

这是我的代码：

'use strict';

(function() {

class MainController {

  constructor($http, $scope, socket, uiCalendarConfig) {
    this.$http = $http;
    this.socket = socket;
    this.awesomeThings = [];
    this.awesomeTesting = [];
    this.events = [];
    this.events.splice(0, this.events.length);
    this.eventSources = [this.events];
    console.log(this.eventSources);


    /* config object */
    $scope.uiConfig = {
      calendar:{
        height: 450,
        editable: true,
        header:{
          left: 'month',
          center: 'title',
          right: 'today prev,next'
        },
        dayClick: $scope.alertEventOnClick,
        eventDrop: $scope.alertOnDrop,
        eventResize: $scope.alertOnResize
      }
    };

    $scope.$on('$destroy', function() {
      socket.unsyncUpdates('thing');
    })
  }

  $onInit() {
    this.$http.get('/api/things').then(response => {
      this.awesomeThings = response.data;
      this.socket.syncUpdates('thing', this.awesomeThings);
    });

    this.$http.get('/api/calendars').then(response => {
      this.awesomeTesting = response.data;

      this.awesomeTesting.forEach(function (objectItem) {
        console.log('displays property in each object: ', objectItem.title);

        this.events.push({
          title: objectItem.title,
          start: objectItem.start
        });

      });
      this.socket.syncUpdates('calendar', this.awesomeTesting);
    });
  }

  addThing() {
    if (this.newThing) {
      this.$http.post('/api/things', { name: this.newThing });
      this.newThing = '';
    }
  }

  deleteThing(thing) {
    this.$http.delete('/api/things/' + thing._id);
  }
}

angular.module('myApp')
  .component('main', {
    templateUrl: 'app/main/main.html',
    controller: MainController
  });

})();

【问题讨论】：

标签： javascript arrays angularjs ecmascript-6 angular-fullstack

【解决方案1】：

我通过创建一个 for 循环而不是 .forEach() 解决了这个问题，但我仍然想知道如何使用 .forEach() 来解决这个问题？

for循环的解决方案：

for (var i = 0; i < this.awesomeTesting.length; i++) {

    this.events.push({
      title: this.awesomeTesting[i].title,
      start: this.awesomeTesting[i].start
    });
  }

【讨论】：

【解决方案2】：

尝试删除this.events.splice(0, this.events.length); 希望这会有所帮助。

【讨论】：

我仍然得到：“TypeError：无法读取未定义的属性‘事件’”。在这里查看我为什么使用它：link.

【解决方案3】：

试试这个：

var that = this; 而不是替换 this.events -> that.events

`$onInit() {

*var that = this;*
this.$http.get('/api/things').then(response => {
  this.awesomeThings = response.data;
  this.socket.syncUpdates('thing', this.awesomeThings);
});

this.$http.get('/api/calendars').then(response => {
  this.awesomeTesting = response.data;

  this.awesomeTesting.forEach(function (objectItem) {
    console.log('displays property in each object: ', objectItem.title);

    *that.events.*push({
      title: objectItem.title,
      start: objectItem.start
    });

  });
  this.socket.syncUpdates('calendar', this.awesomeTesting);
});

【讨论】：

感谢您的努力，但仍然没有运气。我还假设这是一个范围问题，我认为它与 $onInit() 的范围有关？
如果它可以正常工作，那就太好了，而且可能是 $onInit() 的问题。我不确定这一点。对不起。