如何使用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>

點擊查看示例