基于AngularFire与Firestore，在ng2-smart-table中展示并编辑嵌套roles对象

你遇到的问题核心是roles在Firestore里是键值对对象（比如{admin: true, user: true}），而ng2-smart-table默认会把对象直接转成[object Object]显示。下面分两步帮你搞定显示和编辑的需求：

第一步：让角色字段正常显示 #

我们可以用ng2-smart-table自带的valuePrepareFunction处理这个对象，提取出所有值为true的角色名称，用逗号分隔展示。修改你的配置：

export const userTableSettings = {
  delete: {
    confirmDelete: true,
    deleteButtonContent: '<i class="ft-x danger font-medium-1 mr-2"></i>'
  },
  add: {
    confirmCreate: true,
  },
  edit: {
    confirmSave: true,
    editButtonContent: '<i class="ft-edit-2 info font-medium-1 mr-2"></i>'
  },
  firstName: { title: 'Full Name' },
  lastName: { title: 'User Name' },
  email: { title: 'Email' },
  roles: {
    title: 'Role',
    // 处理角色对象，提取有效角色
    valuePrepareFunction: (cellValue) => {
      // 遍历对象的所有键，筛选出值为true的角色
      return Object.keys(cellValue).filter(role => cellValue[role]).join(', ');
    }
  },
  attr: { class: 'table table-responsive' },
};

这样表格里就会显示类似admin, user的角色列表，而不是[object Object]了。

第二步：实现角色的编辑功能 #

要让用户能在表格里更新角色，我们需要自定义一个编辑器组件，因为默认编辑器不支持这种键值对格式的对象。

1. 创建自定义角色编辑器组件 #

首先生成一个组件（比如RoleEditorComponent），代码如下：

组件模板（role-editor.component.html）

<div class="role-editor">
  <!-- 这里可以根据你的实际角色列表调整，比如admin、user、editor等 -->
  <label class="mr-3">
    <input type="checkbox" [(ngModel)]="selectedRoles.admin" /> Admin
  </label>
  <label class="mr-3">
    <input type="checkbox" [(ngModel)]="selectedRoles.user" /> User
  </label>
  <label>
    <input type="checkbox" [(ngModel)]="selectedRoles.editor" /> Editor
  </label>
</div>

组件类（role-editor.component.ts）

import { Component, OnInit } from '@angular/core';
import { EditorComponent } from 'ng2-smart-table';

@Component({
  selector: 'app-role-editor',
  templateUrl: './role-editor.component.html',
  styleUrls: ['./role-editor.component.scss']
})
export class RoleEditorComponent implements EditorComponent, OnInit {
  // 从ng2-smart-table接收的当前单元格值
  cellValue: any;
  // 存储选中的角色，格式和Firestore一致
  selectedRoles: { [key: string]: boolean } = {};
  // 可选的角色列表，你可以根据实际情况调整
  availableRoles = ['admin', 'user', 'editor'];

  ngOnInit(): void {
    // 初始化选中状态：把Firestore的角色对象转换成复选框的选中状态
    this.availableRoles.forEach(role => {
      this.selectedRoles[role] = this.cellValue?.[role] || false;
    });
  }

  // ng2-smart-table会调用这个方法获取编辑后的值
  get value(): any {
    return this.selectedRoles;
  }

  set value(val: any) {
    this.cellValue = val;
  }
}

2. 在表格配置中使用自定义编辑器 #

修改userTableSettings里的roles配置，指定使用我们的自定义编辑器：

roles: {
  title: 'Role',
  valuePrepareFunction: (cellValue) => {
    return Object.keys(cellValue).filter(role => cellValue[role]).join(', ');
  },
  editor: {
    type: 'custom',
    component: RoleEditorComponent, // 这里指定我们的组件
  }
},

3. 注册组件 #

别忘了在你的Angular模块里声明这个组件：

import { NgModule } from '@angular/core';
import RoleEditorComponent from './role-editor.component';
// 其他导入...

@NgModule({
  declarations: [
    // 其他组件...
    RoleEditorComponent
  ],
  // 如果是Angular 8及以下版本，需要加入entryComponents
  // entryComponents: [RoleEditorComponent]
})
export class YourModule { }

这样配置后，你就能在表格里看到格式化后的角色列表，编辑时会弹出带复选框的角色选择器，保存后会自动把选中的角色转换成Firestore需要的键值对格式（比如{admin: true, user: false}），完美匹配你的数据结构~

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