Angular中如何从sessionStorage设置p-multiSelect的选中值？

你目前只实现了将选中值保存到sessionStorage的逻辑，但组件初始化（包括浏览器刷新后）没有从sessionStorage读取值并赋值给绑定的selectedEnvironments，所以刷新后选中状态丢失。以下是具体修复方案：

步骤1：在组件初始化时恢复选中值与过滤状态 #

在组件的ngOnInit钩子中添加读取sessionStorage的逻辑，解析后赋值给绑定变量，同时同步表格过滤器：

修改你的component.ts代码：

import { OnInit } from '@angular/core';

// 确保组件类实现OnInit接口
export class YourComponent implements OnInit {
  // 你的现有属性：selectedEnvironments、environments、table等

  ngOnInit(): void {
    // 读取sessionStorage中保存的选中值
    const savedEnvValues = sessionStorage.getItem('envValues');
    if (savedEnvValues) {
      this.selectedEnvironments = JSON.parse(savedEnvValues);
      // 同步更新表格过滤器，保持过滤状态
      this.table.filter(this.selectedEnvironments, 'app.environment', 'in');
    }
  }

  // 你的现有onFilter方法
  public onFilter(event: any, field: string, selector: string, sessionName: string, sessionValue: any): void {
    this.updateFilterCounter(event);
    this.table.filter(event.target ? event.target.value : event.value, field, selector);

    if (sessionName === 'envValues') {
      sessionStorage.setItem(sessionName, JSON.stringify(sessionValue));
    } else {
      sessionStorage.setItem(sessionName, sessionValue);
    }
  }
}

步骤2：确保选项匹配逻辑正确（针对对象数组选项） #

如果你的environments是对象数组（如包含label和value属性的对象），PrimeNG默认通过对象引用匹配选中项，可能导致解析后的对象无法匹配原选项。此时需指定optionValue属性，通过唯一标识匹配：

修改component.html中的p-multiSelect：

<th class="status-filter-header">
    <p-multiSelect
      name="app.environment"
      [options]="environments"
      placeholder="alle..."
      [showClear]="true"
      [(ngModel)]="selectedEnvironments"
      (onChange)="onFilter($event, 'app.environment', 'in', 'envValues', selectedEnvironments)"
      styleClass="p-column-filter"
      optionValue="value" <!-- 替换为你的选项对象中唯一标识的属性名 -->
    >
    </p-multiSelect>
  </th>

关键说明 #

• 初始化时赋值selectedEnvironments是让ngModel同步之前的选中状态，使p-multiSelect显示已选内容。
• 调用this.table.filter是为了让表格在刷新后保持与选中值对应的过滤状态。
• 若environments是简单字符串数组，无需添加optionValue，直接解析赋值即可。

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