角度下拉问题

问题描述

我一直试图在单击按钮时获得一些下拉菜单，但似乎不起作用。有人可以告诉我这是什么问题。

dashboard.css

.dropdown-menu .user-menu {    
    width: 240px;
    padding: 0;
    .user-img{
        width: 100px;
    }   
    .dropdown-item{
        color: #666 !important;
    }
    
}

dashboard.html

 <div class="dropdown d-inline-block">
      <a class="dropdown-toggle no-caret pl-2 pr-2" id="user-menu" data-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">
        <i class="fa fa-user-o" aria-hidden="true"></i>
      </a>

      <div class="dropdown-menu dropdown-menu-right rounded-0 mt-3 p-0 Box-shadow" aria-labelledby="user-menu">
        <div class="user-menu">
          <div class="user-info text-center p-3">
            <img class="rounded-circle"
              src="https://image.shutterstock.com/image-vector/user-icon-trendy-flat-style-260nw-418179865.jpg"
              width="40">
            <p class="mt-1 mb-0">
              Dave
              <br>
              <small>9th Oct 2020</small>
            </p>
          </div>
          <a class="dropdown-item" [routerLink]="['profile']"><i class="fa fa-user mr-2"></i>{{ 'Profile' }}</a>
          <a class="dropdown-item mb-1" [routerLink]="['/login',{error:'n',id: '1'}]">
            <i class="fa fa-power-off mr-2"></i>{{'logout' }}
          </a>

        </div>
      </div>
    </div>

component.ts

ngOnInit() {
    jQuery('#user-menu').on('click','.nav-item a',function () {
      setTimeout(() => jQuery(this).closest('.dropdown').addClass('show'));
    });
  }

进口就像下面的进口

  imports: [
    CommonModule,MatSelectModule,FormsModule,ReactiveFormsModule,NgbModule,]

解决方法

您需要做的就是在应用模块中导入一些必要的模块：

  imports: [
    BrowserModule,BrowserAnimationsModule,FormsModule,HttpClientModule,MatSelectModule,MatNativeDateModule,ReactiveFormsModule,]

然后，您将不得不在组件ts文件中添加一个表单控件：

toppings = new FormControl();

并将其也添加到您的模板中：

<mat-select [formControl]="toppings" multiple>
...
</mat-select>

最后在styles.css中添加一些样式：

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

body {
  font-family: Roboto,Arial,sans-serif;
  margin: 0;
}
.basic-container {
  padding: 30px;
}
.version-info {
  font-size: 8pt;
  float: right;
  margin: 8px;
}

这是一个实时演示，可以帮助您：link

angular angular2-routing