У меня есть поисковый ввод, который должен фильтровать список элементов флажков
<mat-dialog-content class="cfg-add-fields-dialog__content">
<div class="cfg-add-fields-dialog__filter-input" role="search">
<mat-form-field appearance="fill" class="cfg-add-fields-dialog__mat-form-field">
<input type="search" matInput (keyup)="_applyFilter($event.target.value)" placeholder="Search"
aria-label="Search" />
<mat-icon matSuffix>search</mat-icon>
</mat-form-field>
</div>
<mat-selection-list #matSelectionList role="listbox" (selectionChange)="
_onSelectionChange(matSelectionList.selectedOptions.selected)
">
<div *ngIf="items && items.length > 0">
<mat-list-option #matOption checkboxPosition="before" *ngFor="let item of filteredItems$ | async" tabindex="-1"
role="option" [value]="item">
{{ item.name }}
</mat-list-option>
</div>
</mat-selection-list>
когда я открываю свой диалог в конструкторе, я создаю переменную Observable.
constructor(
public dialogRef: MatDialogRef<CfgAddFieldsDialog>,
@Inject(MAT_DIALOG_DATA) _data: any,
) {
this.items = _data;
this.filteredItems$ = combineLatest(
this._itemsCollection,
this._searchUpdated.pipe(debounceTime(DEBOUNCE_TIME_MS), startWith('')),
).pipe(
map(([collection, searchText]) =>
this._filterCollection(collection, searchText),
),
);
setTimeout(() => {
this._itemsCollection.next(this.items);
}, 50);
}
_filterCollection(collection: CfgFields[], searchText: string): CfgFields[] {
return (collection = collection.filter(
item =>
item.name
.toLocaleLowerCase()
.indexOf(searchText.trim().toLocaleLowerCase()) !== -1,
));
}
_applyFilter(searchValue: string): void {
/** adds the items from the input to the subject itemsCollection */
this._searchUpdated.next(searchValue);
}
Теперь моя проблема в том, чтобы установить флажок в списке и начать поиск другого элемента, а затем очистить условие поиска. При этом флажок, который я установил ранее, не сохраняется в своем состоянии.
Можете ли вы помочь мне, что я здесь пропустил?