角度垫自动完成与突出显示管道问题

Question

我有一个场景，我正在使用带有自定义突出显示管道的垫子自动完成。一切正常，当我从自动完成中选择一个值然后尝试重置表单时出现问题，表单正在重置，但自动完成中的值仍然突出显示。

突出显示.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>

堆栈闪电战演示

单击重置时，我不希望突出显示任何值。有没有办法解决这个问题。

提前致谢

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

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