无法让 ag-grid 显示用户的角色

Question

这是我第一次使用 ag Grid，我试图在 ag Grid 中显示所有用户的信息，但我无法显示每个人的角色。角色存储在一个数组中，因为每个用户可以获得一个或多个角色。如果你能指出我在这里遗漏了什么，那就太好了，因为我已经被困了一段时间了。

这是我在 Angular 中的用户模型：

import { Role } from "../../accounts-mangament/model/role";

export class UserDisplay {

    id: number;
    name : string ;
    username : string;
    email : string ; 
    roles : Role[];
    isDeactivated : number ;
    createdAt : Date ;
    createdBy : string ;
}

这是 SpringBoot 中的用户模型

@Entity
@Table(name = "users", uniqueConstraints = { @UniqueConstraint(columnNames = { "username" }), @UniqueConstraint(columnNames = {"email"})})
public class User extends Auditable<String> {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;
    private String username;
    @NaturalId
    private String email;
    private String password;
    @ManyToMany(fetch = FetchType.LAZY)
    @JoinTable(name = "user_roles",
            joinColumns = @JoinColumn(name = "user_id"),
            inverseJoinColumns = @JoinColumn(name = "role_id"))
    private Set<Role> roles = new HashSet<>();
    private int isActive; //now   
    private String confirmationToken;
    private String resetToken;
    private int isDeactivated;
 }

我的 Angular 的用户服务

@Injectable({
  providedIn: 'root'
})
export class UserServiceService {

  private baseURL = environment.apiUrl ;

  constructor(private http: HttpClient) {  }

  getUserList () : Observable <UserDisplay[]> {
    return this.http.get<any>(`${this.baseURL}api/USERS`);
  }
}

我的组件：

columnDefs = [
    
    {  headerName: 'Name', field: 'name',width: 200, sortable: true, filter: true, checkboxSelection: checkboxSelection, headerCheckboxSelection: headerCheckboxSelection },
    {  headerName: 'UserName', field: 'username', width: 200, sortable: true, filter: true },
    {  headerName: 'Address mail', field: 'email' ,width: 200, sortable: true, filter: true },
    {  headerName: 'Account Status', field: 'isDeactivated', width: 150,sortable: true, filter: true ,editable: true,  cellEditor: 'agSelectCellEditor', cellEditorParams: { values: accountstatus },
       filterParams: { valueFormatter: function (params) { return lookupValue(accountstatusMappings, params.value);}, },
       valueFormatter: function (params) { return lookupValue(accountstatusMappings, params.value);},
    },
    {  headerName: 'Global Role', field: 'roles', width: 150,sortable: true, filter: true ,editable: true,  cellEditor: 'agSelectCellEditor', cellEditorParams: { values: role },
       filterParams: { valueFormatter: function (params) { return lookupValue(roleMappings, params.value);}, },
       valueFormatter: function (params) { return lookupValue(roleMappings, params.value);},
    },
    {  headerName: 'Creation Date', field: 'createdAt', width: 250, sortable: true, filter: true },
    {  headerName: 'Created By', field: 'createdBy', width: 150, sortable: true, filter: true }    
  ];

  rowData : UserDisplay [] ;
...
 ngOnInit(): void {

    this.userServ.getUserList().subscribe(
      data => { this.rowData = data;
      console.log("data",this.rowData);
    },
      error => console.error(error));

  }
....

and this is what I get as an output for the Role part

and this is the data structure of User

现在，我刚刚添加了这段代码来显示第一个分配的角色：

valueGetter: (params) => params.data.roles[0].name

所以代码变成了：

 columnDefs = [

....
{  headerName: 'Global Role', field: 'roles', valueGetter: (params) => params.data.roles[0].name ,width: 150,sortable: true, filter: true ,editable: true,  cellEditor: 'agSelectCellEditor', cellEditorParams: { values: role },
   filterParams: { valueFormatter: function (params) { return lookupValue(roleMappings, params.value);}, },
   valueFormatter: function (params) { return lookupValue(roleMappings, params.value);},
},
...  ];

display became like this

Answer 1

您可以通过使用 valuegetter 对其进行格式化来显示整个列表。

valueGetter: (params) => params.data.roles.join()

我认为设置列过滤器更适合过滤此列。

https://www.ag-grid.com/javascript-grid/filter-set/