TypeError：无法使用Angular读取undefined的属性“comments”

I'm following this tutorial When I try to post a comment on a post I get a TypeError: Cannot read property 'comments' of undefined error in my console.

我正在关注本教程当我尝试在帖子上发表评论时,我得到一个TypeError:无法在我的控制台中读取未定义错误的属性“注释”。

the mainCtrl,

.controller('mainCtrl', ['$scope', 'posts',
  function($scope, posts){
    $scope.posts = posts.posts;

  $scope.addPost = function(){
    if(!$scope.title || $scope.title === '') { alert("Field can't left blank"); return; }

    $scope.posts.push({
      title: $scope.title,
      upvotes: 0,
      comments: [
        {author: 'Joe', body: 'Cool post!', upvotes: 0},
        {author: 'Bob', body: 'Great idea but everything is wrong!', upvotes: 0}
      ]
    });
  };
  }
])

and the postCtrl,

和postCtrl,

.controller('PostsCtrl', ['$scope', '$stateParams', 'posts',
  function($scope, $stateParams, posts){
    $scope.post = posts.posts[$stateParams.id];

    $scope.addComment = function(){
      if($scope.body === '') { return; }
      $scope.post.comments.push({
        body: $scope.body,
        author: 'user',
        upvotes: 0
      });
      $scope.body = '';
    };

  }
])

Both controllers are in mainCtrl.js.

两个控制器都在mainCtrl.js中。

And here are my home.html and post.html partials which are being included through router-ui.

这是我的home.html和post.html部分,它们通过router-ui包含在内。

%script{:id => "/home.html", :type => "text/ng-template"}
  %h1
    Flappernews

  %a{:href => "#/posts/{{$index}}"} Comments

%script{:id => "/posts.html", :type => "text/ng-template"}
  %h2
    Below here should be comments
  %span
    {{ post.comments }}
  %div{"ng-repeat" => "comment in post.comments | orderBy:'-upvotes'"}
    {{comment.upvotes}} - by {{comment.author}}
    %span{:style => "font-size:20px; margin-left:10px;"}
      {{comment.body}}

  %form{"ng-submit" => "addComment()"}
    %h3 Add a new comment
    .form-group
      %input.form-control{"ng-model" => "body", :placeholder => "Comment", :type => "text"}
    %button.btn.btn-primary{:type => "submit"} Post

When I visit the homepage I get redirected to localhost:3000/#/home I can then enter a title and post it. When I click on the comments link I get redirected to http://localhost:3000/#/posts/ and when I try to post a comment I get the

当我访问主页时,我被重定向到localhost:3000 /#/ home我可以输入标题并发布。当我点击评论链接时,我会被重定向到http:// localhost:3000 /#/ posts /当我尝试发表评论时,我得到了

TypeError: Cannot read property 'comments' of undefined at Scope.$scope.addComment error.

TypeError:无法读取Scope中未定义的属性“comments”。$ scope.addComment错误。

4 个解决方案

#1

You have defined two separate controllers, don't need to do that. If you look at that tutorial again you will see that addPost and addComment functions are inside single controller like this

您已经定义了两个单独的控制器,不需要这样做。如果再次查看该教程,您将看到addPost和addComment函数在这样的单个控制器中

   .controller('PostsCtrl', [
    '$scope',
    '$stateParams',
    'posts',
    function($scope, $stateParams, posts){

    // Fetch post object from state parameter.
    $scope.post = posts.posts[$stateParams.id];

    // Add Post.
    $scope.posts.push({
      title: $scope.title,
      link: $scope.link,
      upvotes: 0,
      comments: [
        {author: 'Joe', body: 'Cool post!', upvotes: 0},
        {author: 'Bob', body: 'Great idea but everything is wrong!', upvotes: 0}
      ]
    });

    // Add comment.
    $scope.addComment = function(){
      if($scope.body === '') { return; }
      $scope.post.comments.push({
        body: $scope.body,
        author: 'user',
        upvotes: 0
      });
      $scope.body = '';
    };

    }]);

add post and comment works on single Post object where comments property is pre defined.

在单个Post对象上添加帖子和评论工作,其中预定义了comments属性。

#2

I am sure there is reference link issue. $scope.posts = posts.posts; only should be used to access the posts object. CURD operation should be performed on service directly.

我确信有参考链接问题。 $ scope.posts = posts.posts;只应该用来访问posts对象。 CURD操作应该直接在服务上执行。

$scope.posts would get automatically changed because there is a reference link between $scope.posts and posts.

$ scope.posts将自动更改,因为$ scope.posts和帖子之间存在引用链接。

Please make below change. Hope it should work.

请在下方进行更改。希望它应该工作。

    $scope.addPost = function () {
      if (!$scope.title || $scope.title === '') {
          alert("Field can't left blank");
          return;
      }

      posts.posts.push({
          title: $scope.title,
          upvotes: 0,
          comments: [{
              author: 'Joe',
              body: 'Cool post!',
              upvotes: 0
          }, {
              author: 'Bob',
              body: 'Great idea but everything is wrong!',
              upvotes: 0
          }]
      });
  };

now you are able to share data between different controllers. Same should be done while adding comment.

现在您可以在不同的控制器之间共享数据。添加评论时也应该这样做。

Important part :

重要部分 :

you can not get post like posts.posts[$stateParams.id]; This will match the index of array and return the object.

你不能像posts.posts [$ stateParams.id]那样发帖;这将匹配数组的索引并返回该对象。

angular.forEach(posts.posts, function (post) {
    if (post.id === parseInt($stateParams.id)) {
        $scope.post = post;
        return;
    }

})

Hope this will help you.

希望这会帮助你。

#3

In your 'mainCrtl', you are not saving/adding new post data to your 'posts' object but added to '$scope.posts' so its reflecting in your page with comment link (let's say your newly created post id is 'x' ).

在你的'mainCrtl'中,你没有保存/添加新帖子数据到你的'posts'对象,但是添加到'$ scope.posts'所以它反映在你的页面中带有评论链接(假设你新创建的帖子ID是'x ')。

And when you are clicking on comments link, and trying to check the data which is not added before to your 'posts' object ie.., posts[x] is undefined (you have not added id 'x' data in maincrtl).

当你点击评论链接,并试图检查之前没有添加到你的'posts'对象的数据,即..,posts [x]是未定义的(你没有在maincrtl中添加id'x'数据)。

Hope I have Answered your question.

希望我已经回答了你的问题。

#4

Since I cannot debug the code so I'll try to list all possible reasons and you can confirm which is true for your case

由于我无法调试代码,因此我将尝试列出所有可能的原因,您可以确认哪种情况适用于您的情况

1. Make sure the new post is pushed to the posts service correctly.

确保新帖子正确推送到帖子服务。

Place a breakpoint after the $scope.posts.push and log posts.posts to make sure the new object is added to the array

在$ scope.posts.push和log posts.posts之后放置一个断点,以确保将新对象添加到数组中

2. Make sure the PostsCtrl has the same posts.posts array with the new post added.

   确保PostsCtrl具有相同的posts.posts数组,并添加了新帖子。

3. Make sure $stateParams.id is actually a valid index for the posts.posts array

   确保$ stateParams.id实际上是posts.posts数组的有效索引

I hope this helps. If not, make a comment with the results.

我希望这有帮助。如果没有,请对结果进行评论。