Блог

Главная - Вопросы по программированию - Выпадающий список проблема в angular

Выпадающий список проблема в angular

#angular #angular2-routing

#angular #angular2-маршрутизация

Вопрос:

Я пытался получить какой-то выпадающий список при нажатии кнопки, но, похоже, он не работает. Может кто-нибудь сказать мне, в чем проблема с этим.

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,
  ]

Комментарии:

1. вы пытаетесь использовать MatSelect или создаете пользовательский выпадающий список? можете ли вы поделиться своим файлом ts? сделать демонстрацию stackblitz?

2. @Elmehdi Я отредактировал приведенный выше код. И я использую пользовательский выпадающий список

3. Не используйте Jquery для управления DOM, angular имеет встроенные методы для выполнения подобных действий, или вы можете использовать MatSelect, который является компонентом выбора материала angular material.angular.io/components/select/examples

4. Я создал демонстрацию здесь, параметры MatSelect не отображаются при нажатии angular-pqqmaw.stackblitz.io

5. вы поделились только сайтом в своей живой демонстрации, вы не поделились базой кода

Ответ №1:

Все, что вам нужно сделать, это импортировать некоторые необходимые модули в ваш модуль приложения:

   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;
}

Вот живая демонстрация, которая вам поможет: ссылка