自动完成 - select 选项以编程方式

Question

我在尝试以编程方式 select 自动完成中的选项时遇到问题。

MatAutocomplete 没有 select 方法，所以我尝试在 MatOption 上使用 select 方法。这似乎没有做任何事情。

matAutocomplete.options.find(opt => opt.id === 1).select();

使用 Autocompelete _emitSelectEvent(option) 方法会触发 optionSelected 方法，但不会更新 UI 或实际将选项设置为 selected。

matAutocomplete._emitSelectEvent(option);

有没有办法以编程方式 select 一个选项，以便它更新 UI 并调用 optionSelected 事件发射器？

<input [matAutocomplete]="autocomplete1" />
<mat-autocomplete #autocomplete1="matAutocomplete" [displayWith]="display1()" (optionSelected)="selected1($event.option.value)">
    <mat-option *ngFor=let opt of filteredOptions | async" [value]="opt">
        {{ opt.name }}
    </mat-option>
</mat-autocomplete>

<input [matAutocomplete]="autocomplete2" />
<mat-autocomplete #autocomplete2="matAutocomplete" [displayWith]="display2()" (optionSelected)="selected2($event.option.value)">
    <mat-option *ngFor="let opt of filteredOptions2 | async" [value]=opt>
        {{ opt.name }}
    </mat-option>
</mat-autocomplete>

    export class obj {
        public id: number;
        public name: string;
    }

    @ViewChild("autocomplete2") autocomplete2: MatAutocomplete;
    
    selected1(value: obj): void {
        const opt = this.autocomplete2.options.find(opt => (opt.value as obj).id === 1);

        // Does nothing
        opt.select();

        // Fires optionSelected on autocomplete2, does not update the UI
        opt._selectViaInteraction();

        // Fires optionSelected on autocomplete2,
        // does not set the option to be selected or update the UI
        this.autocomplete2._emitSelectEvent(opt);
    }

我正在使用 Angular & Material 版本 5.2.4

Answer 1

我能够通过将 input2 的值设置为我想要从第二个自动完成 select 的完整对象来解决这个问题。

这将使用 mat-autocomplete 中设置的 displayWith 函数显示在输入中。

<input [matAutocomplete]="autocomplete1" [formControl]="input1" />
<mat-autocomplete #autocomplete1="matAutocomplete" (optionSelected)="selected1($event.option.value) [displayWith]="display1()">
    <mat-option *ngFor="let opt of options1" [value]="opt">
        {{ opt.name }}
    </mat-option>
</mat-autocomplete>

<input [matAutocomplete]="autocomplete2" [formControl]="input2" />
<mat-autocomplete #autocomplete2="matAutocomplete" (optionSelected)="selected2($event.option.value) [displayWith]="display2()">
    <mat-option *ngFor="let opt of options2" [value]="opt">
        {{ opt.name }}
    </mat-option>
</mat-autocomplete>

export class Obj {
    public id: number;
    public name: string;
}

let randomObj: Obj = new Obj();

input2: FormControl = new FormControl();
select1(value: Obj): void {
    this.input2.setValue(this.randomObj);
}

您不需要进入自动完成并获得您想要的特定选项，您可以将任何内容设置为随后可以使用 displayWith 函数显示的值。

例如，如果你displayWith函数如下：

displayWith(value: Obj): string {
    return value.name;
}

如果您使用具有名称属性的任何对象设置输入的值，那么它将显示为输入中的文本。

input.setValue({ name: "HelloWorld" });

即使传递给 setValue 方法的对象不是 Obj 类型，它仍然可以与 displayWith 函数一起使用。如果将值设置为无法使用 displayWith 函数显示的对象，那么所发生的只是输入中的文本将为空白（同时输入的值仍设置为对象集）。

所以 input.setValue({ foo: "bar" }) 将在文本框中不显示任何内容，但 input.value 将是 { foo: "bar" }

自动完成 - select 选项以编程方式

Autocomplete - select option programmatically

angular-material2