Программно выбрать элемент в автозаполнении материалов

У меня есть mat-autocomplete на странице, где мы храним ранее использованные значения в localStorage. Мне нужно установить значение mat-autocomplete при загрузке, если элемент существует в локальном хранилище, но я не уверен, как это сделать?

HTML моего автозаполнения:

<input type="text" placeholder="Select a trade" aria-label="Select a trade" matInput [formControl]="tradeCtrl" [matAutocomplete]="auto" required>
<mat-error *ngIf="tradeCtrl.invalid">You must enter a trade.</mat-error>
<mat-autocomplete #auto="matAutocomplete" md-menu-class="autocomplete">
    <mat-option *ngFor="let option of filteredCategoryOptions | async" [value]="option.name" (onSelectionChange)="onTradeSelected($event, option)">
        <span [innerHTML]="option.name | highlight: toHighlight"></span>
    </mat-option>
</mat-autocomplete>

тогда component.ts - это;

 ngOnInit() {

        this.categorySubscription = this.service.getCategories().subscribe((categories: ICategory[]) => {

            this.categoryOptions = categories;

            this.filteredCategoryOptions = this.tradeCtrl.valueChanges
                .pipe(
                startWith(''),
                map(options => options ? this.categoryFilter(options) : this.categoryOptions.slice())
            );

            //bool whether we populate from localStorage or not
            if (this.populateOnInit) {
                let category = localStorage.getItem('trade'); 
                 // note that this will be the TradeCategory.Id
                //how to set the autocomplete here??
            }
        });
}

Как я упоминал в коде, ICategory - это пара имени и идентификатора. Это также идентификатор, хранящийся в локальном хранилище.

Как мне установить здесь значение, пожалуйста?

3
0
1 721
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Задайте значение элемента управления формы, затем активируйте поиск или то, что должно запускать ваше автозаполнение.

let category = localStorage.getItem('trade');
this.tradeCtrl.setValue(category);
// ... Then run your search

РЕДАКТИРОВАТЬ Не видел комментарий идентификатора / значения. Вот как найти правильную категорию

const categoryID = localStorage.getItem('trade');
const category = categories.find(c => c.id === categoryID); // Parse to Number if not a string
this.tradeCtrl.setValue(category);
// ... Then run your search

Большое спасибо за разъяснение, что сработало как шарм.

Matthew Flynn 11.04.2018 14:27

А как насчет создания метода

resetAutoComplete(){
this.filteredCategoryOptions = this.tradeCtrl.valueChanges
                .pipe(
                startWith(''),
                map(options => options ? this.categoryFilter(options) : this.categoryOptions.slice())
            );
}

Тогда назовите это как

ngOnInit() {

        this.categorySubscription = this.service.getCategories().subscribe((categories: ICategory[]) => {

            this.categoryOptions = categories;

            this.resetAutoComplete();

            //bool whether we populate from localStorage or not
            if (this.populateOnInit) {
                const categoryID = localStorage.getItem('trade');
                this.categoryOptions = categories.find(c => c.id === categoryID); 
             this.resetAutoComplete();
            }
        });
}

Другие вопросы по теме