как конвертировать в редактируемое поле выбора? - PullRequest
Новая
       21

как конвертировать в редактируемое поле выбора?

2 голосов
/ 04 апреля 2019

У меня есть угловой проект 5 с начальной загрузкой.в одном из моих компонентов HTML у меня есть поле выбора.когда я нажимаю на него, отображается список выпадающих элементов, и я могу выбрать один.однако я хочу, чтобы пользователь печатал какую-то строку, чтобы выпадающие элементы можно было сузить.Вот мой текущий фрагмент кода, любая идея, как я могу преобразовать поле выбора в редактируемый. 

   <select formControlName="contactList" [compareWith]="compareResource">
      <option value="" disabled>{{ 'PLACEHOLDERS.CONTACT_LIST' | translate }}</option>
      <option *ngFor="let contactList of contactLists" [ngValue]="contactList">{{ contactList.name }}</option>
    </select>

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

Ответы [ 2 ]

1 голос
/ 04 апреля 2019

Это может быть достигнуто с помощью ng-select

Установить ng-select 

npm install --save @ng-select/ng-select

app.module.ts

Импортировать его в модуль 

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { NgSelectModule } from '@ng-select/ng-select';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    CommonModule,
    NgSelectModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

style.css

импорт стиля ng-select по умолчанию 

@import "~@ng-select/ng-select/themes/default.theme.css";

app.component.html

Создать выпадающий список ng-select, привязав nameList в качестве массива элементов для раскрывающегося списка и функции поиска 

<div style="text-align:center">
  Editable Dropdown
</div>

<div style="width:300px; height:200px">
  <ng-select class="autocomplete" dropdownPosition="bottom" [searchFn]="searchName" [items]="nameList"
    [(ngModel)]="selectedName" [dropdownPosition]="'auto'">
    <ng-template ng-header-tmp>
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-6">Username</div>
        </div>
      </div>
    </ng-template>
    <ng-template ng-label-tmp let-item="item">
      <span>{{item}}</span>
    </ng-template>
    <ng-template ng-option-tmp let-item="item" let-index="index">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-4">{{item}}</div>
        </div>
      </div>
    </ng-template>
  </ng-select>
</div>

app.component.ts

Инициализируйте nameList и определите функцию поиска. Здесь я верну имена, которые содержат значение, введенное из выпадающего списка 

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  selectedName: string;
  nameList: string[];

  constructor() { }

  ngOnInit() {
    this.nameList = this.getNameList();
  }

  getNameList(): string[] {
    return [
      'Adam',
      'Alex',
      'Bob',
      'Bennt',
      'Cathrina',
      'Dug',
      'Suzzy',
      'Amy',
      'Milan'
    ];
  }

  searchName(filter: string, item: string) {
    filter = filter.toLocaleLowerCase();
    return (item.toLocaleLowerCase().indexOf(filter) > -1);
  }
}
0 голосов
/ 04 апреля 2019

Вы можете использовать Фильтр автозаполнения угловых материалов для достижения желаемого результата.- https://material.angular.io/components/autocomplete/overview#adding-a-custom-filter

...