保留Angular中mat-select的最后选择的值
创始人
2024-11-24 08:30:49
0

在Angular中,你可以使用LocalStorage来存储和获取最后选择的mat-select的值。下面是一个示例代码:

  1. 首先,在你的组件中引入LocalStorage模块和FormControl模块:
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { LocalStorageService } from 'ngx-webstorage';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  selectControl: FormControl = new FormControl();

  constructor(private localStorage: LocalStorageService) {}

  ngOnInit() {
    // 从LocalStorage中获取上次选择的值
    const lastValue = this.localStorage.retrieve('lastValue');
    if (lastValue) {
      this.selectControl.setValue(lastValue);
    }

    // 订阅selectControl的值变化,并将新值保存到LocalStorage中
    this.selectControl.valueChanges.subscribe(value => {
      this.localStorage.store('lastValue', value);
    });
  }
}
  1. 在你的模板文件中使用mat-select和FormControl来实现下拉选择:

  Select an option
  
    {{ option.label }}
  

这样,每次选择一个新的选项时,它的值将被保存到LocalStorage中。在组件初始化时,它将从LocalStorage中获取最后选择的值并将其设置为默认选项。

相关内容

热门资讯

1软件!欢乐卡五星小程序辅助(... 1软件!欢乐卡五星小程序辅助(辅助挂)太坑了其实真的有挂(真是有挂)-哔哩哔哩是一款可以让一直输的玩...
7俱乐部(wpk猫腻)外挂透明... 7俱乐部(wpk猫腻)外挂透明挂辅助机制(辅助挂)专业教程(的确有挂)-哔哩哔哩;wpk猫腻是一种具...
八免费!四川游戏家园万能辅助工... 八免费!四川游戏家园万能辅助工具(透视)太坑了原来真的有挂(存在有挂)-哔哩哔哩1、快速入门:当你通...
第五德州扑克(aa扑克伙牌)外... 第五德州扑克(aa扑克伙牌)外挂透明挂辅助软件(透视)新2024教程(有挂方式)-哔哩哔哩;亲,其实...
4个专用!德扑统计软件(牌力分... 4个专用!德扑统计软件(牌力分析软件)软件透明挂(有人有挂)-哔哩哔哩 科技详细教程;7574469...
第五插件!博雅地方棋牌有挂吗(... 第五插件!博雅地方棋牌有挂吗(辅助挂)太坑了原来真的有挂(真的有挂)-哔哩哔哩;博雅地方棋牌有挂吗是...
第四代码(WPK识别)外挂透明... 第四代码(WPK识别)外挂透明挂辅助工具(辅助挂)新版2024教程(揭秘有挂)-哔哩哔哩这是由厦门游...
第1个系统!德扑手机上算胜率的... 第1个系统!德扑手机上算胜率的软件(好牌)软件透明挂(有挂教学)-哔哩哔哩;原来确实真的有挂(需添加...
六针对!一起宁德麻将app有假... 六针对!一起宁德麻将app有假吗(辅助挂)太坑了其实真的有挂(确实有挂)-哔哩哔哩是一款可以让一直输...
八开发(来玩app)外挂透明挂... 八开发(来玩app)外挂透明挂辅助软件(辅助挂)2024教程(有挂技巧)-哔哩哔哩;亲,其实确实真的...