Fatal编程技术网
  • javascript/
  • Javascript 在深度填充对象中显示角度数据

Javascript 在深度填充对象中显示角度数据

javascript angularjs

Javascript 在深度填充对象中显示角度数据,javascript,angularjs,mean-stack,Javascript,Angularjs,Mean Stack,Html | | {{topic.user_name}}发布了一个主题 {{topic.topic} 描述：{{topic.Description}} 把你的答案贴在这里 {{x.post} 喜欢：{x.up\u vote}不喜欢：{{x.down\u vote} {{topic.posts[x].comments[i].comment} 正如您在下图中看到的，我有所有的数据popualted、Topic对象、Topic Posts和inside Posts注释 在我的html中，

Html


|  | 
{{topic.user_name}}发布了一个主题
{{topic.topic}
描述：{{topic.Description}}
把你的答案贴在这里
{{x.post}
喜欢：{x.up\u vote}不喜欢：{{x.down\u vote}


    

  • {{topic.posts[x].comments[i].comment}
    •
正如您在下图中看到的，我有所有的数据popualted、Topic对象、Topic Posts和inside Posts注释

在我的html中，我可以正确地显示主题内容和帖子，但是很难显示评论

注释正在添加到DB中，但未显示。我有一个ng重复通过每个帖子的评论，但它只是没有显示出来。附加图像以在我的控制台中显示整个对象

我的ng repeat错了吗？

您误解了
x
在您的
ng repeat
中表示的注释
x
是实际的评论对象-帖子上
comments
数组中的每个项目。所以
topic.posts[x]
毫无意义。它应该是
x

因此，显然，将其重命名为
comment
，而不是
x

额外提示：出于性能原因，请始终在
ng repeat
表达式中使用
track by
。在您的情况下，可能是
按注释跟踪。_id

您误解了
x
在
ng repeat
中表示的注释
x
是实际的评论对象-帖子上
comments
数组中的每个项目。所以
topic.posts[x]
毫无意义。它应该是
x

因此，显然，将其重命名为
comment
，而不是
x

额外提示：出于性能原因，请始终在
ng repeat
表达式中使用
track by
。在您的情况下，它将是
trackbycomment.\u id

您的
x
是
post
对象，而不是索引。因此，您的内部
ng repeat
应该是

<div ng-controller="topicController">
     <a href="#/dashboard">Dashboard</a> | <a href="#/topics">Topics</a> | <a href="#/users">Users</a>

    <h4>{{topic.user_name}} posted a topic</h4>

    <h2>{{topic.topic}}</h2>
    <h4>Description: {{topic.description}}</h4>
    <div ng-controller="postController">
        <label>Post Your Answer here</label>
            <form>
                <textarea name="post" ng-model="new_post.post"></textarea>
                <input type='submit' value='Submit' ng-click='addPost(users._id, topic._id, users.name)'>
            </form>

            <div ng-repeat="x in topic.posts">
                <h4>{{x.post}}</h4>
                <p>Likes:{{x.up_vote}} Dislikes:{{x.down_vote}}</p>
                <ul ng-repeat="i in topic.posts[x].comments">
                    <li>{{topic.posts[x].comments[i].comment}}</li>
                </ul>
                <div ng-controller="commentController">
                <form>
                        <textarea name="comment" ng-model="model.comment"></textarea><br>
                        <input type="submit" value="Submit" ng-click="addComment(users._id, x._id, users.name)">
                </form>
            </div>
        </div>
    </div>
</div>

    

  • {{c.comment}}
    •
您的
x
是
post
对象，而不是索引。因此，您的内部
ng repeat
应该是

<div ng-controller="topicController">
     <a href="#/dashboard">Dashboard</a> | <a href="#/topics">Topics</a> | <a href="#/users">Users</a>

    <h4>{{topic.user_name}} posted a topic</h4>

    <h2>{{topic.topic}}</h2>
    <h4>Description: {{topic.description}}</h4>
    <div ng-controller="postController">
        <label>Post Your Answer here</label>
            <form>
                <textarea name="post" ng-model="new_post.post"></textarea>
                <input type='submit' value='Submit' ng-click='addPost(users._id, topic._id, users.name)'>
            </form>

            <div ng-repeat="x in topic.posts">
                <h4>{{x.post}}</h4>
                <p>Likes:{{x.up_vote}} Dislikes:{{x.down_vote}}</p>
                <ul ng-repeat="i in topic.posts[x].comments">
                    <li>{{topic.posts[x].comments[i].comment}}</li>
                </ul>
                <div ng-controller="commentController">
                <form>
                        <textarea name="comment" ng-model="model.comment"></textarea><br>
                        <input type="submit" value="Submit" ng-click="addComment(users._id, x._id, users.name)">
                </form>
            </div>
        </div>
    </div>
</div>

    

  • {{c.comment}}
    •
不确定它是否相关，但是当您有一个包含3篇文章的数组时，您的
帖子计数是0。否帖子计数是我创建的一个字段，与帖子数组无关。不确定它是否相关，但您的
帖子计数是0，而您有一个包含3篇文章的数组。否帖子计数是我创建的一个字段，与帖子的数组没有任何关系。我这样做了，它成功了。。我的印象是，评论是帖子中的一个数组，它本身就是主题中的一个数组，因此我需要迭代主题中的每个帖子实例。不过你所做的更有意义。我做到了，而且成功了。。我的印象是，评论是帖子中的一个数组，它本身就是主题中的一个数组，因此我需要迭代主题中的每个帖子实例。不过，你所做的更有意义。我确实按id跟踪，它给了我“Error:ngRepeat:dups replicate Key in Repeater”，将其更改为按$index跟踪，效果很好。基本上是做同样的事情，对吗？不完全一样。您跟踪的内容在每个项目上都应该是唯一的属性，因此您必须具有重复的
\u id
s（或没有
\u id
属性的记录）。如果使用
按$index跟踪
，然后对列表中的元素重新排序，它将不会正确地移动元素，而是会更改每个元素的内容。我确实按_id跟踪，但它给了我“Error:ngRepeat:dups replicate Key in Repeater”将其更改为按$index跟踪，效果良好。基本上是做同样的事情，对吗？不完全一样。您跟踪的内容在每个项目上都应该是唯一的属性，因此您必须具有重复的
\u id
s（或没有
\u id
属性的记录）。如果使用“
按$index跟踪”
，然后对列表中的元素重新排序，则不会正确地移动元素，而是会更改每个元素的内容。