Aurelia - 为类实现三元组并获取缺少的属性名称

Question

我有一个Typescript项目，并试图显示分隔符。我在SO here上发布了一个问题，并得到了一个我认为可行的答案。

但是，当我尝试在类上实现三元数时，我在两个选项上都得到错误Warning Missing attribute name。

这是我的清单项目：

<li repeat.for="menu of route.settings.nav" class=${menu.navSettings.divider ? 'divider' : 'dropdown-submenu'}>

我在“divider”选项和“dropdown-submenu”选项上都收到警告。此外，通过此修改，它现在不会呈现下一级菜单项。

为什么我会收到缺少的属性警告，如何才能完成此工作..

背景背景

这是整个navmenu：

                    <ul if.bind="route.settings.nav" class="dropdown-menu">
                        <li repeat.for="menu of route.settings.nav" class=${menu.navSettings.divider ? 'divider' : 'dropdown-submenu'}>
                            <a href.bind="menu.href" if.bind="!menu.navSettings.subNav"><span class="glyphicon glyphicon-${ menu.navSettings.icon }"></span> ${menu.title}</a>

                            <a href.bind="menu.href" if.bind="menu.navSettings.subNav" class="dropdown-toggle" data-toggle="dropdown">
                                <span class="glyphicon glyphicon-${ menu.navSettings.icon }"></span> ${menu.title} <span class="caret-right"></span>
                            </a>
                            <ul if.bind="menu.navSettings.subNav" class="dropdown-menu">
                                <li repeat.for="subMenu of menu.navSettings.subNav" class="dropdown-submenu">
                                    <a href.bind="subMenu.href" if.bind="!subMenu.subNavSettings.subSubNav"><span class="glyphicon glyphicon-${ subMenu.subNavSettings.icon }"></span> ${subMenu.title}</a>

                                    <a href.bind="subMenu.href" if.bind="subMenu.subNavSettings.subSubNav" class="dropdown-toggle" data-toggle="dropdown">
                                        <span class="glyphicon glyphicon-${ subMenu.subNavSettings.icon }"></span> ${subMenu.title} <span class="caret-right"></span>
                                    </a>
                                    <ul if.bind="subMenu.subNavSettings.subSubNav" class="dropdown-menu">
                                        <li repeat.for="lowestSubMenu of subMenu.subNavSettings.subSubNav" class="dropdown-submenu">
                                            <a href.bind="lowestSubMenu.href"> <span class="glyphicon glyphicon-${ lowestSubMenu.subSubNavSettings.icon }"></span> ${lowestSubMenu.title}</a>
                                        </li>
                                    </ul>                        
                                </li>
                            </ul>
                            <!--<span class="divider" if.bind="menu.navSettings.divider"> </span>-->
                        </li>
                    </ul>

最后这里是包含第一级下拉选项的路由，包括分隔符：

        {
            route: "clients",
            name: "clients",
            moduleId: PLATFORM.moduleName("../components/clients/clientList/clientList"),
            title: "Clients",
            nav: true,
            settings: {
                nav: [
                    {
                        href: "#clients/clientsList",
                        title: "Client List",
                        navSettings: {
                            icon: "list",
                            roles: ["Employee", "Admin"],
                        }
                    },
                    {
                        navSettings: {
                            roles: ["Employee", "Admin"],
                            divider: true,
                        }
                    },
                    {
                        href: "#clients/Create",
                        title: "Create Client",
                        navSettings: {
                            icon: "user",
                            roles: ["Employee", "Admin"],
                        }
                    }
                ],
                icon: "user",
                auth: true,
                roles: ["Employee", "Admin"],
                pos: "left"
            }
        },

Answer 1

您忘记在class属性值周围添加引号：

<li repeat.for="menu of route.settings.nav" 
  class="${menu.navSettings.divider ? 'divider' : 'dropdown-submenu'}">