如何在页面加载时从localStorage设置Mat-Autocomplete选中项？

我来帮你搞定这个问题！核心思路就是在页面初始化阶段，从localStorage里取出之前存储的值，匹配到Autocomplete的选项列表后，赋值给对应的FormControl就行。下面分步骤给你讲清楚：

第一步：组件逻辑配置 #

首先假设你的组件里已经定义了tradeCtrl（FormControl）和Autocomplete的选项列表，我会补充关键的加载逻辑：

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  tradeCtrl = new FormControl('');
  // 示例选项：如果是对象数组（比如{id: number, name: string}）也可以，后面会说明处理方式
  tradeOptions: string[] = ['Carpentry', 'Electrician', 'Plumbing', 'Welding'];
  filteredTrades: Observable<string[]>;

  ngOnInit() {
    // 保留你原本的Autocomplete过滤逻辑
    this.filteredTrades = this.tradeCtrl.valueChanges.pipe(
      startWith(''),
      map(value => this._filterTrades(value || ''))
    );

    // 关键：加载localStorage中保存的选中值
    this.loadSavedTrade();
  }

  private _filterTrades(value: string): string[] {
    const filterValue = value.toLowerCase();
    return this.tradeOptions.filter(option => option.toLowerCase().includes(filterValue));
  }

  // 新增：读取localStorage并设置选中值
  private loadSavedTrade() {
    // 替换成你实际存储的localStorage键名
    const savedTrade = localStorage.getItem('selectedTrade');
    
    if (savedTrade) {
      // 情况1：选项是字符串数组，直接赋值即可
      this.tradeCtrl.setValue(savedTrade);

      // --- 若选项是对象数组，用下面这段代码替代 ---
      // const matchedTrade = this.tradeOptions.find(trade => trade.name === savedTrade);
      // if (matchedTrade) {
      //   this.tradeCtrl.setValue(matchedTrade);
      // }
    }
  }

  // 补充：用户选择选项时，把值存入localStorage（你可能已经有这段，但还是提一下）
  onTradeSelected(event: any) {
    const selectedValue = event.option.value;
    // 如果是对象，存对应的标识属性，比如selectedValue.name
    localStorage.setItem('selectedTrade', selectedValue);
  }
}

第二步：完善HTML模板 #

把Autocomplete的选项渲染和选中事件补上：

<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" (optionSelected)="onTradeSelected($event)">
  <mat-option *ngFor="let trade of filteredTrades | async" [value]="trade">
    {{ trade }}
    <!-- 若选项是对象，这里改为{{ trade.name }} -->
  </mat-option>
</mat-autocomplete>

关键注意事项 #

• 存储格式匹配：如果选项是对象，不要直接存对象到localStorage（它只能存字符串），可以存对象的唯一标识（比如name或id），取出后通过标识找到对应对象再赋值；如果要存完整对象，记得存的时候用JSON.stringify()，取出来用JSON.parse()解析。
• 过滤函数适配：如果用对象数组，要修改_filterTrades函数，比如根据对象的name属性过滤。
• 初始化时机：把加载逻辑放在ngOnInit里就好，此时FormControl已经初始化完成。

这样就能在页面加载时，自动把localStorage里保存的Trade设置为Autocomplete的选中值啦！

内容的提问来源于stack exchange，提问作者Matthew Flynn