Aurelia - 将一个列表项用户名 - 添加到navmenu会在黑色上创建一个黑色条目并且位置不正确

Question

我需要在导航栏上的logout选项旁边显示用户名。我这样做的方式如下：

            <ul class="nav navbar-nav navbar-right">
                <li>${userName}</li>
                <li repeat.for="row of router.navigation" if.bind="row.settings.pos == 'right'" class="${ row.isActive ? 'link-active' : '' }">
                    <a href.bind="row.href" if.bind="!row.settings.nav">${ row.title }</a>

我认为如果我在nav navbar-nav中添加了另一个列表项，它将显示为所有其他菜单项。相反，我得到了：

我已经将管理员名称突出显示为，如果我没有，它将是黑色的黑色。它没有像其他菜单项那样接收正确的样式。

如何呈现管理列表项，使其显示为与所有其他列表项一样？

修改

看到这个问题，有人指出背景很明显。那是深夜。

是的我正在使用bootstrap第3版。

以下是导航栏视图模型的完整html：

    <template>
        <require from="./navmenu.css"></require>
        <div class="main-nav">
            <div class="navbar navbar-inverse">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#/home">Jobsledger</a>
                </div>
                <div class="navbar-collapse collapse">

                    <ul class="nav navbar-nav navbar-left">
                        <li repeat.for="row of routes" if.bind="row.settings.pos == 'left'" class="${ row.isActive ? 'link-active' : '' }">
                            <a href.bind="row.href" if.bind="!row.settings.nav">${ row.title }</a>

                            <a href.bind="row.href" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"
                               if.bind="row.settings.nav">
                                ${row.title}
                                <span class="caret"></span>
                            </a>

                            <ul if.bind="row.settings.nav" class="dropdown-menu">
                                <li repeat.for="menu of row.settings.nav">
                                    <a href.bind="menu.href">${menu.title}</a>
                                </li>
                            </ul>
                        </li>
                    </ul>

                    <ul class="nav navbar-nav navbar-right">
                        <li>${userName}</li>   //HERE - THIS LINE DOESNT RENDER PROPERLY.
                        <li repeat.for="row of routes" if.bind="row.settings.pos == 'right'" class="${ row.isActive ? 'link-active' : '' }">
                            <a href.bind="row.href" if.bind="!row.settings.nav">${ row.title }</a>

                            <a href.bind="row.href" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"
                               if.bind="row.settings.nav">
                                ${row.title}
                                <span class="caret"></span>
                            </a>

                            <ul if.bind="row.settings.nav" class="dropdown-menu">
                                <li repeat.for="menu of row.settings.nav">
                                    <a href.bind="menu.href">${menu.title}</a>
                                </li>
                            </ul>
                        </li>
                    </ul>

                </div>
            </div>
            ${userName}
    </template>

这是其背后的打字稿文件：

    import { autoinject, bindable, bindingMode } from "aurelia-framework";
    import { Router } from 'aurelia-router'
    import { AuthService } from '../../auth/auth-service'


    @autoinject
    export class Navmenu {
        public userName: string = 'anonymous';
        private userRole = localStorage.getItem("user_role");


        constructor(public authService: AuthService, public router: Router) {
            this.userName = authService.getUserName();
        }

        get routes() {
            return this.router.navigation.filter(r => r.settings.roles.indexOf(this.userRole) > -1);
        }
    }

我想将左侧菜单项与右侧菜单项分开，因此有两个部分。这是您拥有用户名和注销选项的右侧。用户名的显示在无序列表标记中作为列表项完成，但在重复右侧菜单项之前。