Angular 10中如何加载localStorage存储的公司ID对应的关联分支机构数据

代码问题修复及优化 #

现有代码核心错误 #

• filter过滤逻辑中错误使用赋值运算符=，而非相等比较运算符，导致所有数据的CompanyId都会被强制修改为存储的id，过滤逻辑完全失效
• 未对localStorage取值为空的情况做容错处理，若cid不存在时会得到NaN，导致过滤结果不符合预期

修正后代码 #

ngAfterViewInit() {
  this.getBranches();
}

getBranches() {
    // 增加空值容错，取不到cid时可根据业务逻辑设置兜底值
    const cidStr = localStorage.getItem('cid');
    const id = cidStr ? +cidStr : 0;
    console.log('当前选中公司ID：', id);
    this.branchService.getBranches().subscribe(x => {
       // 直接赋值过滤后的结果即可，无需冗余的Object.assign操作
       this.branchData = x.filter(b => b.CompanyId === id);
    });
}

跨组件同步补充方案 #

由于公司选择下拉和分支机构列表是独立组件，若要实现切换公司后分支机构列表无需刷新即可自动更新，可按以下逻辑调整：

1. 新增公共状态服务，在服务中定义Subject类型的可观察对象存储当前选中的公司ID
2. 公司选择组件切换选项时，同时更新localStorage和公共服务中的公司ID
3. 分支机构组件订阅公共服务中的公司ID变化，每次ID变更时重新调用getBranches拉取过滤数据

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