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

Question

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

MatAutocomplete

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

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

使用 Autocompelete _emitSelectEvent(option) 方法会导致触发 optionSelected 方法，但不会更新 UI 或实际设置要选择的选项。

matAutocomplete._emitSelectEvent(option);

有没有办法以编程方式选择一个选项，以便更新 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 的值设置为我想从第二个自动完成中选择的完整对象来解决此问题。

然后使用 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;
}

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

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

即使传递到 setValue 方法的对象不是 Obj 类型，它仍然可以与

displayWith

函数一起使用。如果您将值设置为无法使用

displayWith

函数显示的对象，则输入中的文本将为空白（同时输入的值仍设置为对象集）。

所以

input.setValue({ foo: "bar" })

不会在文本框中显示任何内容，但

input.value

将是

{ foo: "bar" }