Question

在一种情况下，我使用带有自定义突出显示管道的mat-autocomplete。一切正常，当我从自动完成功能中选择一个值然后尝试重置表单时，问题就来了，表单正在重置，但自动完成功能中的值仍突出显示。

highlight.pipe.ts

transform(text: string, search): string {
    const pattern = search
      .replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&")
      .split(' ')
      .filter(t => t.length > 0)
      .join('|');
    const regex = new RegExp(pattern, 'gi');
    return search ? text.replace(regex, match => `<b>${match}</b>`) : text;
  }

component.html

<form class="example-form">
    <mat-form-field class="example-full-width">
        <input matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
        <mat-autocomplete #auto="matAutocomplete">
            <mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
        <span [innerHTML]="state.name | highLight: toHighlight"></span>
                <span></span>
            </mat-option>
        </mat-autocomplete>
    </mat-form-field>
</form>

Stackblitz Demo

单击“重置”后，我不想突出显示任何值。有什么办法可以解决此问题。

预先感谢

Answer 1

您必须在重置功能中再次重置为HighHigh =''...但是您遇到了另一个烦人的小问题，在删除您键入的内容后，即使该字段为空，它仍然会记住最后一个角色并突出显示它..so，您现在的解决方案是始终重置表单，但您必须对此进行处理

Answer 2

您可以将多个参数传递给管道，因此可以传递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;
}

Your forked STACKBLITZ

带有高光管道问题的角垫自动完成

2 个答案: