时间戳

首页 > 解决方案 > 自动完成 - 以编程方式选择选项

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

问题描述

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

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

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

标签： angular-material2

解决方案

我可以通过使用我想从第二个自动完成中选择的完整对象设置 input2 的值来解决这个问题。

然后，这将使用displayWithmat-autocomplete 中设置的函数显示在输入中。

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

推荐阅读