Bootstrap 下拉菜单 - 更改菜单项的显示属性

Question

我正在使用带角度的 Bootstrap 下拉菜单。我想使用 display 属性使一些菜单项可见和不可见。 hidden_​​item 类定义为 display:none。当用户登录时，它会显示“消息”菜单项，但单击它不会显示收件箱和已发送链接。稍后，如果我刷新页面，一切都会按预期工作，并且收件箱和已发送变得可见。如何在不刷新页面的情况下使其工作？

                <li  [ngClass]="isLoggedIn() ? 'dropdown' : 'hidden_item'">
                    <a  [routerLink]="['Mailbox', {'boxname': 'inbox'}]" class="dropdown-toggle">Messages <span class="nav-up-carret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a [routerLink]="['Mailbox', {'boxname': 'inbox'}]">Inbox</a> </li>
                        <li><a [routerLink]="['Mailbox', {'boxname': 'sent'}]">Sent</a></li>
                    </ul>
                </li>

Answer 1

您可以使用 *ngIf 并以这种方式尝试：

li  *ngIf="isLogedIn()">
       <a  [routerLink]="['Mailbox', {'boxname': 'inbox'}]" class="dropdown-toggle">Messages <span class="nav-up-carret"></span>
      </a>
            <ul class="dropdown-menu" role="menu">
                  <li><a [routerLink]="['Mailbox', {'boxname': 'inbox'}]">Inbox</a> </li>
                  <li><a [routerLink]="['Mailbox', {'boxname': 'sent'}]">Sent</a></li>
            </ul>
</li>

这样，如果isLogedIn()返回false，angular会自动从dom中删除块，但如果返回true，则会添加它。

Answer 2

如果我正确理解了您的问题，您的“消息”锚元素中缺少 data-toggle="dropdown" 属性。

应该是

<li  [ngClass]="isLogedIn() ? 'dropdown' : 'hidden_item'">
                    <a  [routerLink]="['Mailbox', {'boxname': 'inbox'}]" class="dropdown-toggle" data-toggle="dropdown">Messages <span class="nav-up-carret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a [routerLink]="['Mailbox', {'boxname': 'inbox'}]">Inbox</a> </li>
                        <li><a [routerLink]="['Mailbox', {'boxname': 'sent'}]">Sent</a></li>
                    </ul>
                </li>