Ionic与Laravel按角色获取用户数据异常排查求助

我需要通过Laravel按角色分类获取对应角色下的所有用户，但在Ionic调用接口时，仅能看到角色的名称、状态等数据，无法获取到用户信息，不确定是Laravel查询逻辑还是Ionic服务实现存在问题。

数据库结构 #

Laravel 查询方法 #

public function searchRol($id){
        try {
            return response()->json(
                ['data' => profile::with('Usuario')->where('rol_id','=', $id)->get()], 200);
        } catch (\Exception $e) {
            return response()->json(
            [
                'error' => $e->getMessage(),
                'msg' => 'Error al mostrar los perfiles'
            ], 500);
        }
        
    }

Ionic RolService 代码 #

export class RolService {
    public url: String = environment.url;
    public rols$ = new Subject<Rol[]>();
    public rol$ = new Subject<Rol>();

    public rols: Rol[] = [];
    public rol: Rol;
    constructor(public http: HttpClient) {}
    all$(): Observable<Rol[]> { // observable sirve para que se pueda subscribir en el componente y recibir la data
        return this.rols$.asObservable();
    }
    all(): Observable<any> { // observable sirve para que se pueda subscribir en el componente y recibir la data
        return this.http.get(`${this.url}rol`).pipe( // <-- URL y pipe es para el error 404
            map((res: any) => {
                this.rols = res.data;
                this.rols$.next(this.rols);
                return res.data;
            }),
            catchError(err => {
                console.log(err);
                return err;
            }),
        );
    }  
    // buscar rol por id del rol
    search(id): Observable<any> {
        return this.http.get(`${this.url}rol/search/${id}`).pipe(
            map((res: any) => {
                this.rols = res.data;
                this.rols$.next(this.rols);
                return res.data;
            }),
        
        );
    }

}

Laravel 模型关联代码 #

class profile extends Model
{
    //Primero se crea un modelo para obetner los datos que estan relacionados con la tabla profile con usaurio y rol
    public function Usuario() {
        return $this->belongsTo(user::class, 'user_id');
    }
    public function Rol() {
        return $this->belongsTo(rol::class, 'rol_id');
    }
}

当前显示效果 #

需求：点击角色时，展示该角色下的所有用户。

排查与解决方案 #

1. 先验证Laravel接口返回数据

直接用浏览器或Postman调用 GET /rol/search/{id} 接口，检查返回的data数组中，每个profile对象是否包含Usuario字段：

• 若没有Usuario字段，先修正模型关联：Laravel模型类名默认首字母大写，把关联方法中的user::class改为User::class：

public function Usuario() {
    return $this->belongsTo(User::class, 'user_id');
}

• 同时确认profile表的user_id字段与users表主键（通常是id）对应，且存在有效关联数据。

2. 修正Ionic端数据类型与处理逻辑

如果接口返回的profile对象已包含Usuario数据，但前端未显示：

• 补充类型定义，确保Profile和User接口包含对应字段：

export interface Profile {
  id: number;
  rol_id: number;
  user_id: number;
  Usuario?: User;
  // 其他profile字段
}

export interface User {
  id: number;
  name: string;
  email: string;
  // 其他用户字段
}

• 调整Ionic服务，新增profile相关的状态管理，避免把profile数组错误赋值给rols：

export class RolService {
    public url: String = environment.url;
    public rols$ = new Subject<Rol[]>();
    public profiles$ = new Subject<Profile[]>(); // 新增profile的Observable
    public rols: Rol[] = [];
    public profiles: Profile[] = []; // 新增profile数组

    constructor(public http: HttpClient) {}

    // ... 保留原有all相关方法

    search(id): Observable<Profile[]> {
        return this.http.get(`${this.url}rol/search/${id}`).pipe(
            map((res: any) => {
                this.profiles = res.data;
                this.profiles$.next(this.profiles);
                return res.data;
            }),
            catchError(err => {
                console.error(err);
                return throwError(() => err);
            })
        );
    }
}

• 在组件中订阅profiles$，并在模板中正确渲染用户信息：

<div *ngFor="let profile of profiles">
  <p>用户名：{{ profile.Usuario?.name }}</p>
  <!-- 其他用户字段 -->
</div>

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