Question

我有一个小时列表框（由1到12组成的角材料列表框），我将其转换为自动完成的垫子。

列表框不是被动形式。

下面是我在其中创建模板以提取静态列表选项的html。

<table>
  <tr>
    <td>
      <mat-form-field>
        <input type="text" [(ngModel)]="fromCreateDateTime.Hour" [ngModelOptions]="{standalone: true}" placeholder="Hour" matInput [matAutocomplete]="autoFromCreateDateTimeHour">

        <mat-autocomplete #autoFromCreateDateTimeHour="matAutocomplete" placeholder="Hour" [displayWith]="displayFn">
          <mat-option *ngFor="let hour of hoursList" [value]=" hour ">{{hour.name}}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>
    </td>
  </tr>
</table>

此处hoursList是一个如下定义的数组。这不是可观察的。

hoursList: Array, any > =
  export const hoursList: Array < any > = [{
    name: "00",
    value: 0
  }, {
    name: "01",
    value: 1
  }, {
    name: "02",
    value: 2
  }, {
    name: "03",
    value: 3
  }, {
    name: "04",
    value: 4
  }, {
    name: "05",
    value: 5
  }, {
    name: "06",
    value: 6
  }, {
    name: "07",
    value: 7
  }, {
    name: "08",
    value: 8
  }, {
    name: "09",
    value: 9
  }, {
    name: "10",
    value: 10
  }, {
    name: "11",
    value: 11
  }, {
    name: "12",
    value: 12
  }];

由于此处的数据是非异步数据，因此如何将过滤器（在mat输入中键入）应用到mat自动完成。

Answer 1

您可以使用 (ngModelChange) 和 [ngModel] 代替 [(ngModel)]。像这样：

模板：

df['col1'].duplicated().any().sum()

组件：

<mat-form-field>
   <mat-label>Some label</mat-label>
   <input type="text"
      matInput
      [ngModel]="someObject"
      [matAutocomplete]="autocopmlete"
      (focus)="filter('')"
      (ngModelChange)="filter($event)">
      <mat-autocomplete
         #autocopmlete="matAutocomplete"
         [displayWith]="displayName">
      <mat-option
         *ngFor="let item of filteredObject"
         [value]="item">
         {{ item.name }}
      </mat-option>
   </mat-autocomplete>
</mat-form-field>

Answer 2

如果您只考虑使用字符串数组，则非常简单：

import {Component, OnInit} from '@angular/core';
import {FormControl} from '@angular/forms';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';

@Component({
  selector: 'autocomplete-filter-example',
  templateUrl: 'autocomplete-filter-example.html',
  styleUrls: ['autocomplete-filter-example.css'],
})
export class AutocompleteFilterExample implements OnInit {
  myControl = new FormControl();
  options: string[] = [
    "00",
    "01",
    "02",
    "03",
    "04",
    "05",
    "06",
    "07",
    "08",
    "09",
    "10",
    "11",
    "12",
  ];

  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)
    );
  }

}

以及您的模板：

<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>

这是您推荐的Sample StackBlitz。

垫自动完成以获取非异步数据

2 个答案: