代码之家 › 专栏 › 技术社区 › whiterook6

为什么我的javascript对象属性正在消失?

object angularjs javascript

whiterook6 · 技术社区 · 8 年前

我正在编写一个简单的AngularJS webapp,在我的导航服务中,我有一个菜单项列表:

    class NavigationService {
        constructor($location) {
            this.$location = $location;

            this.menu = [{
                label: 'Overview',
                key: 'overview',
                children: [{
                    label: 'My Balances',
                    key: 'overview_balances',
                    click: () => {
                        this.$location.path('/balances');
                    }
                }]
            }, {
                label: 'Wallets',
                children: [{
                    label: 'Bitcoin',
                    key: 'wallets_bitcoin',
                    click: () => {
                        this.$location.path('/btc/balances');
                    }
                }, {
                    label: 'Ethereum',
                    key: 'wallets_ethereum',
                    click: () => {
                        this.$location.path('/eth/balances');
                    }
                }, {
                    label: 'Add...',
                    key: 'wallets_add',
                    click: () => {
                        this.$location.path('/wallets/add');
                    }
                }]
            }];
        }
        // some other code omitted
    }

    NavigationService.$inject = ['$location'];

    export default NavigationService;

但是,当我在其中一个菜单项的click函数中放置断点时 key 属性未定义,即使存在标签和其他值:

how it looks

我正在使用Webpack将ES6代码转换为枯燥的javascript,但正在检查生成的捆绑包。js仍然显示 钥匙 财产在创造时就存在。此外,虽然屏幕截图没有显示,但概述 钥匙 仍然存在--只是 钥匙 的s children 未定义的对象数组。如果他们被移除,为什么他们会出现在检查员中?

我知道 钥匙 在JS中不是保留字,但在Angular中是否有不同的用法?我当然可以为值选择不同的名称,但我想知道发生了什么。如何在内存中跟踪该变量,并查看键消失的点?

1 回复 | 直到 8 年前

whiterook6 8 年前

我找到了答案。奇怪的是,标签的反应不一样,无论我怎么更改键,它都会一直设置为 undefined . 我意识到我对变量的使用很可能是罪魁祸首。原来我有 = 而不是 == 在我的 ng-class 声明:

    <ul class="menu-list">
        <li ng-repeat="child in menu.children">
            <a ng-bind="child.label"
                ng-class="{
                    'is-active': child.id = ctrl.Navigation.current_menu.id
                }"
                ng-click="ctrl.Navigation.select_menu(child)"></a>
        </li>
    </ul>

每当我点击菜单项时,或者每当出现摘要时-- 它将设置 child.id 变量至 ctrl.Navigation.current_menu.id 我想这是没有定义的。将其更改为 == 修复了问题。