Блог

Я внедряю один продукт, в который я интегрировал библиотеку коллекции пользовательского интерфейса nz-zorro.

Я хочу реализовать элемент управления вводом, который может принимать теги от пользователя. nz-zorro предоставит мне такую функцию с nz-select помощью control.

когда мы пишем tag, а затем нажимаем enter, он преобразуется как chip. проверьте ниже gif :

Но этот элемент управления является элементом управления select, поэтому он откроет выпадающий список под элементом управления, который я не хочу открывать.

Если кто-нибудь знает о том, как отключить только выпадающий список, а не управление вводом, пожалуйста, помогите мне.

Я пробовал этот код :

 <nz-form-item>
    <nz-form-control>
          <nz-select formControlName="tags" nzMode="tags" nzPlaceHolder="Add Keywords">
          </nz-select>
    </nz-form-control>
</nz-form-item>
  

Я также пробовал использовать пользовательский раскрывающийся шаблон с nzDropdownRender опцией и оставить шаблон пустым, но выпадающий список все равно открывается.

Если у кого-нибудь есть какие-либо настройки по этому поводу, пожалуйста, укажите здесь. это сэкономит мне кучу времени.

После того, как я потратил много времени на эту функцию, я нашел решение, которое мы можем скрыть с помощью css.

После некоторой документации я нашел директиву пользовательского выпадающего класса в nz-select control, из которой можно скрыть выпадающее меню select .

Вот мое решение :

component.ts:

 <nz-form-item>
  <nz-form-control>
      <nz-select formControlName="tags" nzDropdownClassName="hide-dropdown" nzMode="tags" nzPlaceHolder="Add Keywords">
      </nz-select>
  </nz-form-control>
</nz-form-item>
  

в глобальном style.css :

 .hide-dropdown {
   display: none;
 }
  

Это позволит вводить теги только путем ввода. не из параметров выбора…