Как грамотно сделать выпадающий список на angular?

Пользователь

от alisa.bahringer , в категории: JavaScript , год назад

Как грамотно сделать выпадающий список на angular?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от abel , год назад

@alisa.bahringer 

Существует несколько способов создания выпадающего списка на Angular, но один из наиболее распространенных способов - использование директивы ngFor для создания списка элементов и директивы ngModel для связывания выбранного элемента с моделью данных.

  1. Создайте массив элементов, которые будут отображаться в выпадающем списке. Например:
1
2
3
4
5
6
items = [
  { id: 1, name: 'Option 1' },
  { id: 2, name: 'Option 2' },
  { id: 3, name: 'Option 3' },
  { id: 4, name: 'Option 4' }
];


  1. Добавьте элемент select в шаблон компонента, где будет располагаться выпадающий список. Например:
1
2
3
<select [(ngModel)]="selectedItem">
  <option *ngFor="let item of items" [value]="item.id">{{ item.name }}</option>
</select>


  1. В коде компонента создайте свойство selectedItem, которое будет хранить выбранный элемент. Например:
1
selectedItem: number;


  1. Теперь при выборе элемента из списка его значение будет автоматически связано с selectedItem.


Обратите внимание, что для использования директивы ngModel нужно импортировать модуль FormsModule в модуле, в котором используется компонент:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    FormsModule
  ],
  declarations: [
    MyComponent
  ]
})
export class MyModule { }


Пользователь

от deion , месяц назад

@alisa.bahringer 

Теперь, когда выбранный элемент сохраняется в свойстве selectedItem, вы можете использовать его в коде компонента или передать его в другие компоненты для дальнейшей обработки.