У меня есть приложение Angular, и я реализовал панель поиска в заголовке страницы (которая в основном представляет собой форму с вводимым текстом).Я хочу включить кнопку «х» во ввод, чтобы я мог сбросить его текст.Эта кнопка должна появляться только тогда, когда у ввода есть текст.Первым решением, которое я нашел, было изменение типа ввода на «поиск», но это не сработало, как я ожидал.После этого я вручную добавил кнопку и использовал директиву * ngIf, чтобы проверить, имеет ли formControl какие-либо значения.
<button *ngIf="searchTerm.value" pButton type="reset"
class="iwp-icon-gen_close_l reset-button"
[izDisabled]="isDisabled$ | async"
(click)="resetSearchTerm()"
></button>
В моем компоненте код выглядит так:
// The user input in the full text search input field.
searchTerm = new FormControl('');
ngOnInit() {
this.filterService.filter$
.pipe(takeUntil(this.unsubscribe))
.subscribe(filter => this.searchTerm.setValue(filter.searchTerm));
}
Когдастраница загружается, она выдает ExpressionChangedAfterItHasBeenCheckedError, и я знаю, что это можно решить, инкапсулировав код внутри ngOnInit с помощью setTimeOut (fn, 0), но я пытаюсь найти «чистый» способ сделать это.Кто-нибудь может мне помочь?