无法让 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));
}
....

这就是我得到的角色部分的输出

这是用户的数据结构

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

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);},
},
...  ];

显示器变成了这样的

Answer 1

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

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

我认为设置列过滤器会更适合过滤这个列。

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