为什么我的javascript对象属性消失了？

Posted 2021-04-01

我正在编写一个简单的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属性也是未定义的：

我正在使用Webpack将ES6代码转换为枯燥的javascript，但是检查生成的bundle.js仍然显示key属性是在创建时。此外，虽然屏幕截图没有显示，但概述key仍然存在 - 它只是未定义的key对象数组的childrens。如果他们被移除，为什么他们会出现在检查员身上？

我知道key不是JS中的保留字，但它在Angular中的使用方式不同吗？我当然可以为这个值选择一个不同的名字，但我想知道发生了什么。如何在内存中跟踪该变量并查看密钥消失的位置？

答案

我找到了答案。奇怪的是，标签没有以同样的方式作出反应，无论我改变了什么键，它都被设置为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，这是未定义的，我想。将其更改为==可以解决问题。