Angular - Показать раскрывающийся список после записи @ в поле ввода - PullRequest
Новая
       5

Angular - Показать раскрывающийся список после записи @ в поле ввода

1 голос
/ 01 марта 2020

Моя цель - показать выпадающее меню , когда я начну писать @ в поле ввода.

Мой компонент 

  myControl: FormControl = new FormControl();

  options = [
    'One',
    'Two',
    'Three'
  ];

  filteredOptions: Observable<string[]>;

  ngOnInit() {
    this.filteredOptions = this.myControl.valueChanges
      .pipe(
        startWith('@'),
        map(val => val.length >= 1 ? this.filter(val): [])
      );
  }

  filter(val: string): string[] {
    return this.options.filter(option =>
      option.toLowerCase().indexOf(val.toLowerCase()) === 0);
    console.log(this.options)
  }

Это то, что я сделал, но это не работает.

HTML 

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input #inputField 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>

Ответы [ 2 ]

2 голосов
/ 01 марта 2020

Ваша подписка работает отлично.

Вы просто забыли отключить функцию @ in filter , поскольку у вас нет @ в вашем списке параметров .

Попробуйте это: 

filter(val: string): string[] {
  return this.options.filter(option =>
    option.toLowerCase().indexOf(val.toLowerCase().replace('@', '')) === 0);
}
1 голос
/ 01 марта 2020

Просто зарегистрируйтесь в событии изменения на вашем входе - например: 

(change)='handlerMethode($event)'

Проверьте вход для индекса @, и если вы найдете то, что вы хотите.

...