Question

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

MatAutocomplete没有选择方法，因此我尝试在MatOption上使用选择方法。这似乎无能为力。

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

使用自动完成_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的值来解决此问题。

然后使用在自动填充功能中设置的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" }

Answer 2

请检查以下代码，这将解决您的问题。

var isArabic = /[\u0600-\u06FF\u0750-\u077F]/;
if (isArabic.test(x)){
   ...
}

  private displayForm(event: MatAutocompleteSelectedEvent) {
    if (event.option.value) {
      this.responseFlag = true;
    }
  }
  
private doFilter() {
//Code to process after selection of the item
}

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

2 个答案: