ngFor 输入文本过滤器 angular2答案

【问题标题】：ngFor input text filter angular2ngFor 输入文本过滤器 angular2
【发布时间】：2018-07-17 19:30:16
【问题描述】：

我希望用户能够输入关键字来过滤输入字段中菜单项中的项目。我无法插入 ngModel，想知道是否有解决方法？这也应该不使用按钮动态完成

<div class="launch-switch-popup" [class.hidden]="!isActive">
     //INPUT OF SOME SORT GOES HERE
    <div class="launch-switch-item" *ngFor="let item of menuItems">
        <img class="icon" [src]="item.icon"> 
        <p class="launch-switch-title">{{item.text}}</p>
        <br>
        <div class="plugin-row" *ngFor="let child of item.children" (click)="clicked(child)">
            <p>{{child.text}}</p>
        </div>
    </div>
</div>

【问题讨论】：

codeburst.io/…
试材料自动完成

标签： angular typescript filter

【解决方案1】：

mat-autocomplete-filter-input

HTML：

<form class="example-form">
    <mat-form-field class="example-full-width">
        <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
        <mat-autocomplete #auto="matAutocomplete">
            <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
                {{option}}
            </mat-option>
        </mat-autocomplete>
    </mat-form-field>
</form>

TS：

 myControl = new FormControl();
  options: string[] = ['One', 'Owo', 'Ohree','Ope', 'Owk', 'Oyree'];
  filteredOptions: Observable<string[]>;

  ngOnInit() {
    this.filteredOptions = this.myControl.valueChanges
      .pipe(
      startWith(''),
      map(value => this._filter(value))
      );
  }

  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();

    return this.options.filter(option => option.toLowerCase().includes(filterValue));
  }

【讨论】：