如何以编程方式触发optionSelected Angular Material自动完成功能?

问题描述

我有一个Angular Autocomplete组件,尝试在其他事件之后触发ts文件中的(optionSelected)事件。我正在使用this.myControl.setValue(options[1].value)的更新选项设置输入,但这不会触发自动完成(optionSelected)事件。

这是一个堆叠闪电战:

https://stackblitz.com/edit/angular-s3gn1w-xtfxgb?embed=1&file=app/autocomplete-simple-example.ts

import { Component,ViewChild} from '@angular/core';
import { FormControl } from '@angular/forms';
import { MatAutocompleteTrigger,MatAutocompleteSelectedEvent } from '@angular/material'

/**
 * @title Simple autocomplete
 */
@Component({
  selector: 'autocomplete-simple-example',templateUrl: 'autocomplete-simple-example.html',styleUrls: ['autocomplete-simple-example.css'],})
export class AutocompleteSimpleExample {
  @ViewChild(MatAutocompleteTrigger) _auto: MatAutocompleteTrigger;
  myControl = new FormControl();
  activeOption
  options: string[] = ['One','Two','Three'];
  trigger?: any;

  setValue() {
    let options = this._auto.autocomplete.options.toArray()
    this.myControl.setValue(options[1].value)
  }

  optionSelected($event: MatAutocompleteSelectedEvent): void {
    console.log('event -->',$event);
    this.trigger = $event.option.viewValue;
  }
}
<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" activeOption="activeOption">
      <mat-option *ngFor="let option of options" [value]="option" (onSelectionChange)="optionSelected($event)">
        {{option}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

<button (click)="setValue()">Set Value</button>

{{ trigger }}

解决方法

像这样在mat-autocomplete上使用optionSelected事件:

html

<mat-autocomplete #autoCompleteUser="matAutocomplete" (optionSelected)="onSelectionChanged($event)">

打字稿

onSelectionChanged(event: MatAutocompleteSelectedEvent) {
    console.log(event.option.value);
    [...]
}

从mat-options中删除onSelectionChange事件

,

您可以使用自动完成实例以编程方式触发更改事件:

    <mat-autocomplete #myAutoComplete="matAutocomplete" 
                      (optionSelected)="onSelectionChanged($event)">
    @ViewChild(MatAutocomplete) myAutocomplete: MatAutocomplete;

    triggerSelectionChanged(): void {
        const ac = this.myAutocomplete; // useless,just for better display here :)
        ac.optionSelected.emit({
                source: ac,option: ac.options.toArray().find((o) => o.selected)
        });
    }

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...