代码之家 › 专栏 › 技术社区 › Matthew Flynn

在“材质自动完成”中以编程方式选择项目

angular-material angular

3

Matthew Flynn · 技术社区 · 8 年前

我有一个 mat-autocomplete 在localStorage中存储以前使用的值的页面上。我需要能够设置 mat自动完成 如果项目存在于localstorage中,但不确定如何执行,则为加载时的值?

我的自动完成的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>

然后是组件。ts is;

 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。

我如何在这里设置值?

2 回复 | 直到 7 年前

1

5

user4676340 user4676340 8 年前

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

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

编辑未看到ID/value注释。下面是如何找到正确的类别

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

2

0

jitender 8 年前

创建一个方法怎么样

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();
            }
        });
}