如何使用Angular在单击按钮时显示HTML5数据列表下拉列表？

Question

我正在使用带有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();
  }

}

Answer 1

您可以使用过滤器和数组来执行此操作

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>

点击查看示例