Блог

Это мой первый раз, когда я использую сетку ag, и я пытаюсь отобразить всю информацию о пользователе в сетке ag, и я не могу отобразить роль каждого из них. Роли хранятся в массиве, поскольку каждый пользователь может получить одну или несколько ролей. Было бы здорово, если бы вы могли указать, чего мне здесь не хватает, потому что я застрял на некоторое время.

итак, это модель моего пользователя в 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;
 }
 

Мой угловой сервис для пользователей

 @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));

  }
....
 

и это то, что я получаю в качестве результата для роли

и это структура данных пользователя

На данный момент я просто добавил этот код для отображения первой назначенной роли :

Определитель значений: (параметры) => параметры.данные.роли[0].имя

таким образом, код стал :

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

дисплей стал таким

вы можете отобразить весь список, отформатировав его с помощью valuegetter.

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

Я думаю, что установить фильтр столбцов было бы более уместно для фильтрации этого столбца.

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