Angular mat-autocomplete with highlight pipe issue

Question

我有一種情況，我正在使用帶有自定義突出顯示 pipe 的 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;
  }

組件.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 演示

單擊重置時，我不希望突出顯示任何值。 有什么辦法可以解決這個問題。

提前致謝

Answer 1

您必須在重置 function 中再次重置 toHighlight='' ......但是您遇到了另一個煩人的小問題，刪除您輸入的內容后，即使該字段為空，它仍然會記住最后一個字符並突出顯示它..所以你現在的解決方案是總是重置表格，但你必須努力

Answer 2

您可以將多個 arguments 傳遞給 pipe，因此您可以傳遞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;
}

你的分叉 STACKBLITZ