Как показать раскрывающийся список HTML5 datalist при нажатии кнопки с помощью Angular?

Я использую поле ввода с HTML5 datalist. Как только пользователь вводит текст и нажимает значок / кнопку поиска, он извлекает данные, которые я хочу показать в виде предложений раскрывающегося списка / списка данных. Как я могу это сделать? Вот мой код (я использую Angular 6):

import { Component, ViewChild, ElementRef } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
    <div class="group">
      <input #name list="browsers">
      <datalist id="browsers">
      <option value="Internet Explorer">
      <option value="Firefox">
      <option value="Chrome">
      <option value="Opera">
      <option value="Safari">
      </datalist>    
      <button (click)="editName()">Edit</button>
  </div>
`,
  styleUrls: ['./app.component.scss']
})

export class AppComponent {

  @ViewChild("name") nameField: ElementRef;

  editName(): void {
    this.nameField.nativeElement.focus();
  }

}

javascript angular angular8 angular6
person Gopinath Vedagiri    schedule 30.08.2019    source источник
comment
После того, как пользователь нажмет кнопку, я хочу показать раскрывающийся список, вместо того, чтобы пользователь снова щелкнул поле ввода.   -  person Gopinath Vedagiri    schedule 30.08.2019
comment
пожалуйста, поделитесь также component.html   -  person Naga Sai A    schedule 30.08.2019
comment
Это для Angular или AngularJS? Удалите нерелевантный тег.   -  person Chris Pickford    schedule 30.08.2019
comment
@NagaSaiA Я использовал Templete, а не TempleteURL, поэтому отдельного файла compnent.hmtl нет. шаблон: `‹ div class = group ›‹ input #name list = browsers ›‹ datalist id = browsers ›‹ option value = Internet Explorer ›‹ option value = Firefox ›‹ option value = Chrome ›‹ option value = Opera ›‹ option value = Safari ›‹/datalist›‹ кнопка (нажмите) = editName () ›Изменить ‹/button› ‹/div›`   -  person Gopinath Vedagiri    schedule 03.09.2019

Ответы (1)


arrow_upward
0
arrow_downward

Для этого вы можете использовать фильтр и массив

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

text:string='';
options =['Internet Explorer','Firefox','Chrome','Opera','Safari'];
show=this.options;
  editName(): void {
    this.show= this.options.filter(x=>x.includes(this.text)); 
  }
}
<div class="group">
      <input [(ngModel)]='text' #name list="browsers">
      <datalist id="browsers">
      <option *ngFor="let opt of show" value="{{opt}}">
      </datalist>    
      <button (click)="editName()">Edit</button>
  </div>

Нажмите, чтобы просмотреть пример

person Zulqarnain Jalil    schedule 03.09.2019