Angular 15 ng-select多选组件权限控制问题求助

针对你描述的需求（UI显示全部已选中办公室，修改时下拉仅展示用户有权限的选项），可以通过前端数据分离+自定义模板实现，完全符合经理要求的前端控制逻辑，具体方案如下：

核心思路 #

1. 维护两个独立数据集合：
   • 全量已选中办公室：从共享页面接口获取，用于UI展示所有选中项
   • 用户权限内办公室：从权限接口获取，仅作为下拉选项数据源
2. 利用ng-select的自定义模板，强制显示所有已选中项（包括无权限的）
3. 拦截选中变更事件，确保新增/修改的选项仅来自权限列表

代码实现 #

组件TS逻辑 #

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

// 定义办公室数据结构
interface Office {
  id: string;
  name: string;
}

@Component({
  selector: 'app-office-select',
  templateUrl: './office-select.component.html',
})
export class OfficeSelectComponent {
  // 从共享页面接口获取的全量已选中办公室（示例：Eva的初始选中项[A,B,C]）
  selectedOffices: Office[] = [
    { id: 'A', name: '办公室A' },
    { id: 'B', name: '办公室B' },
    { id: 'C', name: '办公室C' },
  ];

  // 当前用户的权限办公室列表（示例：Eva的权限[A,C]）
  userPermittedOffices: Office[] = [
    { id: 'A', name: '办公室A' },
    { id: 'C', name: '办公室C' },
  ];

  // 下拉选项仅绑定权限内的办公室
  dropdownOptions: Office[] = [...this.userPermittedOffices];

  // 处理选中变更，确保仅新增权限内的选项
  onSelectionChange(newSelected: Office[]) {
    const permittedIds = this.userPermittedOffices.map(o => o.id);
    // 保留原始选中的无权限项，合并新选中的权限项（去重）
    const nonPermittedItems = this.selectedOffices.filter(o => !permittedIds.includes(o.id));
    this.selectedOffices = [...nonPermittedItems, ...newSelected];
  }
}

组件HTML模板 #

<ng-select
  [items]="dropdownOptions"
  [(ngModel)]="selectedOffices"
  [multiple]="true"
  (change)="onSelectionChange($event)"
  placeholder="选择办公室"
>
  <!-- 自定义选中项模板：强制显示所有已选中项，包括无权限的 -->
  <ng-template ng-label-tmp let-item="item" let-clear="clear">
    <span>{{ item.name }}</span>
    <!-- 给无权限项添加视觉标识 -->
    <span *ngIf="!userPermittedOffices.some(o => o.id === item.id)" 
          style="color: #999; margin-left: 4px; font-size: 12px;">(无编辑权限)</span>
    <!-- 仅有权限的项允许删除 -->
    <button *ngIf="userPermittedOffices.some(o => o.id === item.id)" 
            (click)="clear(item)" 
            style="border: none; background: transparent; color: #666; margin-left: 8px;">×</button>
  </ng-template>

  <!-- 下拉选项模板：仅展示权限内的办公室 -->
  <ng-template ng-option-tmp let-item="item">
    <span>{{ item.name }}</span>
  </ng-template>
</ng-select>

关键细节说明 #

• 自定义选中模板：通过ng-label-tmp绕过ng-select默认的「仅显示下拉列表中存在的项」限制，强制展示所有已选中的办公室
• 权限拦截：选中变更时，保留原始无权限的选中项，仅允许新增/修改权限内的选项，确保权限控制生效
• 视觉区分：给无权限的选中项添加灰色标识和禁用删除按钮，明确告知用户权限范围

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