如何在 setValue 后突出显示 angular mat-autocomplete 中的选项值？

Question

这是最大的简化代码示例： https : //stackblitz.com/edit/angular-8r153h-wcvefg?file=app/autocomplete-sample.ts

问题是：当我手动设置 formControl 值时，所选项目未在列表中突出显示：

this.formControl.setValue("second");

但是如果我点击这个项目，那么这个项目就会突出显示：

我看到突出显示是选项有垫子所选的类。

也许有人对如何在 setValue 之后突出显示该项目有任何想法？

Answer 1

您可以传递stateCtrl的值，并将其添加到您的条件中以检查那里是否也存在值：

<span [innerHTML]="state.name | highLight: toHighlight : stateCtrl.value"></span>

然后对该值进行额外检查：

transform(text: string, search: string, ctrlValue: string): string {
  // ....
  return (search && ctrlValue) ? text.replace(regex, match => `<b>${match}</b>`) : text;
}

Answer 2

自动完成-sample.html

<form>
  <mat-form-field>
    <input matInput [formControl]="formControl" [matAutocomplete]="autoComplete">
    <mat-autocomplete #autoComplete="matAutocomplete">
      <mat-option [ngClass]="(formControl.value===option.description)?'mat-selecte-default':''" *ngFor="let option of filteredOptions | async" [value]="option.description">
        {{option.description}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

自动完成-sample.css

.mat-selected {
  background: darkblue !important;
  color: lightgray !important;
}

.mat-selecte-default {
  background: darkblue !important;
  color: lightgray !important;
}

Stackblitz 示例