如何以编程方式触发选项脱落的角度材料自动完成？

Question

I有一个角度自动完成组件，我试图在其他事件发生后TS文件中触发（optionselected）事件。我正在设置带有更新选项的输入，但它不会触发自动完成（optionselected）事件。

这里是堆栈闪电战：

https：//stackblitz.com/edit/angular-s3gn1w-xtfxgb？embed = 1＆file = app/app/autocomplete-simple-example.ts

this.myControl.setValue(options[1].value)

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

尽管有点迟到了聚会 - 尽管如此。我的方法基于角度材料15/16。我发现了有关如何标记选定的术语的搜索问题。因此，我认为我的解决方案可能适合 - 以防其他人正在寻找类似的解决方案。

它解决了什么：

Answer 1

在选项列表中选择一个选项

角材料15/16标记此选项

• 它无法解决：
触发一个可以进一步处理的事件

@sampgun的方法触发了一个事件，但不一定标记选择。不知道这是材料中的错误还是设计为工作： - |

<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上的Options置换事件：

html

Answer 2

typescript

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

从Mat-Options删除OnSelectionChange事件

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

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

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

Answer 3

我的案子只帮助我

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

MatAutocompleteTrigger

Answer 4