Angular mat-autocomplete with highlight pipe 问题

Question

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

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

你必须在重置函数中再次重置 toHighlight=''...但是你又遇到了一个烦人的小问题，在你删除你输入的内容后，即使该字段为空，它仍然会记住最后一个字符并突出显示它..所以你现在的解决方案是总是重置表格，但你必须努力

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

Angular mat-autocomplete with highlight pipe 问题

Angular mat-autocomplete with highlight pipe issue

highlight

angular-material

angular-pipe

angular

angular7