angular - 以编程方式选择 Material 自动完成中的项目

Question

我在一个页面上有一个 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 是一个名称、ID 对。也是存放在localstorage中的Id。

请问我如何设置这里的值？

Answer 1

设置您的表单控件的值，然后触发您的搜索或您的自动完成应该触发的任何内容。

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

编辑 没有看到 ID/值评论。这是找到正确类别的方法

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