Question

我试图在Angular中建立一个列表，我的情况是，当我单击HELP（链接）时，应该显示下拉列表，其中每个列表又是一个导航到相应页面的链接。

我尝试了以下代码

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <div class="navbar-header">
    <div id="navbar-color">
      <ul class="navbar-nav">
        <li class="nav-item active" ngbDropdown>
          <a 
            class="nav-link" 
            style="cursor: pointer" 
            ngbDropdownToggle 
            id="navbarDropdown1" 
            role="button">
            Help
          </a>
          <div 
            ngbDropdownMenu 
            aria-labelledby="navbarDropdown1" 
            class="dropdown-menu">
            <a 
              ngbDropdownItem 
              href="#" 
              (click)="$event.preventDefault()">
              Guides & FAQS
            </a>
            <a 
              ngbDropdownItem 
              href="#" 
              (click)="$event.preventDefault()">
              Contact Us 
            </a>
            <a 
              ngbDropdownItem 
              href="#" 
              (click)="$event.preventDefault()">
              Feedback
            </a>
          </div>
        </li>
      </ul>
    </div>
</nav>

但是，当我单击“帮助”链接时，没有任何作用，则不会显示下拉列表。

不确定在浏览器中调试之后丢失了什么。参考以下链接

https://ng-bootstrap.github.io/#/components/dropdown/examples

请让我知道我是否缺少任何东西，或者是否有更好的方法来实现这一目标。

Answer 1

您的模板中有href个，其值为#。另外，您还会在按钮点击时调用$event.preventDefault()，这不会传播事件。

由于您使用的是Angular，因此我假设您正在为SPA实现此功能。既然如此，您可能已经准备好了一个路由配置，如下所示：

RouterModule.forRoot([
  { path: "list", component: ListComponent },
  { path: "guide-faq", component: GuidesAndFaqsComponent },
  { path: "contact-us", component: ContactUsComponent },
  { path: "feedback", component: FeedbackComponent },
  { path: '**', redirectTo: '/list', pathMatch: 'full' }
])

话虽如此，您只需使用routerLink并在点击时相应地导航用户即可。

在这里，尝试一下：

import { Component } from '@angular/core';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css']
})
export class ListComponent {

  list = new Array(5).fill(4).map((item, index) => index + 1);

}

在您的模板中：

<ul class="list-group">
    <li class="list-group-item" *ngFor="let item of list">
        <div ngbDropdown class="d-inline-block">
            <button 
        class="btn btn-outline-primary" 
        id="dropdownBasic1" 
        ngbDropdownToggle>Toggle dropdown {{ item }}</button>
            <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
                <button ngbDropdownItem routerLink="/guide-faq">Guides & FAQS</button>
                <button ngbDropdownItem routerLink="/contact-us">Contact Us</button>
                <button ngbDropdownItem routerLink="/feedback">Feedback</button>
            </div>
        </div>
    </li>
</ul>

这是您推荐的Working Demo。

在角度7的<li> </li>下创建下拉列表时出错

1 个答案: