Question

我有此代码：

public toggle(event): void {
    console.log(event.currentTarget.parentNode.children);

html：

<div class="activity-header" timeline-item ng-click="vm.toggle($event);">

因此，当我单击事件中传递的标题时，抓住父元素而不是子元素。

当我检查日志时，我看到：

HTMLCollection（2）[div.activity-header，div.activity-footer]

当我单击以展开日志中的阵列时，我看到：

HTMLCollection(2) [div.activity-header, div.activity-footer]
0: div.activity-header
1: div.activity-body
2: div.activity-body
3: div.activity-body
4: div.activity-body
5: div.activity-body
6: div.activity-body
7: div.activity-body
8: div.activity-footer
length: 9

body元素是从ng-repeat渲染的：

<div ng-repeat="activity in vm.activities.items track by activity.id" class="activity-body">

仅供参考，html结构如下：

<div>
    <div class="activity-header" timeline-item ng-click="vm.toggle($event);">
        <i class="material-icons">person</i>
    </div>
    <div ng-repeat="activity in vm.activities.items track by activity.id" class="activity-body">
        <div class="contact-moment">
            <i class="material-icons">person</i>
            <div class="contact-moment-body">
                <b>{{vm.activity.channel | activityChannel}}: <span ng-bind-html="vm.case.title || (vm.activity | activityTitle)"></span></b>
                <br />
                <div ng-include="'/CustomerService/ActivityTimeline/ActivityTemplates/' + activity.type + '.html'" id="{{activity.type}}"></div>
            </div>
        </div>
    </div>
    <div class="activity-footer">
        <md-button>
            Button 1
        </md-button>
    </div>
</div>

因此，问题在于Javascript不在activity-body元素中时对其进行计数。

Answer 1

这是因为当您console.log时，div.activity-body尚未呈现到DOM。当您扩展DOM节点列表时，主体元素已呈现，并且event.currentTarget.parentNode.children参考已更新以反映这一点。

写入日志的只是快照-与之交互时，它将进行更新以反映真实世界。

Answer 2

Unknown symbol in module是一个活动列表，children像大多数其他JavaScript一样拥有对对象的引用。

事件的顺序是：

日志console.log()：其中有2个元素。
再添加7个元素。
单击控制台中的展开图标，这将导致重新检查对象，因此将显示所有9个元素。

数组长度不正确

2 个答案: