автозаполнение mat для не асинхронных данных - PullRequest
Новая
       36

автозаполнение mat для не асинхронных данных

0 голосов
/ 17 сентября 2018

У меня есть поле со списком часов (поле со списком угловых материалов, которое состоит из чисел от 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
  }];

enter image description here

Как применить фильтр (как введено на входе мата) к автозаполнению мата, так как данные здесь являются не асинхронными данными.

1 Ответ

0 голосов
/ 17 сентября 2018

Довольно просто, если вы планируете использовать только строковый массив: 

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>

Вот Образец StackBlitz для вашей ссылки.

...