Angular17中PrimeNG p-dropdown无法加载HTTP选项问题求助

在Angular 17项目中，尝试从HTTP接口获取列表数据，加载到PrimeNG的p-dropdown组件作为选项。尽管控制台能打印出数据，但下拉框始终显示为空。相关代码如下：

组件代码 #

export class HomeComponent implements OnInit {
  perfiles$!: Observable<Perfil[]>;
  selectedPerfil?: Perfil;

  preguntas!: VistaPreviaEntrevistaDto[];
  selectedProduct!: any;

  constructor(private integradorService: IntegradorService) { }

  ngOnInit() {
    this.cargarVistaPreviaEntrevista();
    // 注释掉的尝试代码
    // this.integradorService.listPerfiles().subscribe((data: Perfil[]) => {
    //   this.perfiles$ = Observable<data>;
    // })
    this.perfiles$ = this.integradorService.listPerfiles().pipe(
      map(perfil => perfil)
    );
    this.perfiles$.subscribe(
      (perfiles: Perfil[]) => {
        console.log('Perfiles:', perfiles);
      },
      (error) => {
        console.error('Error al obtener perfiles:', error);
      }
    );

    // this.cargarListaPerfiles();
    // 本地测试数据（可用）
    // this.perfiles = [
    //   {
    //     name: "Backend Java Enginier"
    //   },
    //   {
    //     name: "Frontend"
    //   },
    //   {
    //     name: "Data Science"
    //   },
    //   {
    //     name: "App Mobile Developer"
    //   }
    // ]
  }

  cargarVistaPreviaEntrevista(): void {
    this.integradorService.list().subscribe(
      data => {
        this.preguntas = data;
      },
      err => console.log(err)
    );
  }

  // cargarListaPerfiles(): void {
  //   this.integradorService.listPerfiles().subscribe(
  //     (data) => {
  //       this.perfiles = data;
  //     },
  //     err => console.log(err)
  //   )
  // }
}

HTML模板 #

<p-dropdown *ngIf="perfiles$ | async as perfiles" [(ngModel)]="selectedPerfil" optionLabel="name" [showClear]="true"
      placeholder="Select a City" [options]="(perfiles$ | async)!"></p-dropdown>

服务代码 #

public listPerfiles(): Observable<Perfil[]> {
  return this.httpClient.get<Perfil[]>(`${this.orquestadorURL}/v1/entrevistador/public/perfiles`);
}

接口定义 #

export interface Perfil {
  name: string
}

解决方案 #

1. 修复重复订阅问题 #

HTML模板中同时使用了两次async管道：一次在*ngIf中，一次在[options]中。这会导致Observable被订阅两次，发起两次HTTP请求，且可能出现数据不同步的情况。直接使用*ngIf中已经解析好的perfiles变量即可：

修改后的HTML：

<p-dropdown *ngIf="perfiles$ | async as perfiles" [(ngModel)]="selectedPerfil" optionLabel="name" [showClear]="true"
      placeholder="Select a City" [options]="perfiles"></p-dropdown>

2. 简化Observable处理 #

组件中多余的map操作和手动订阅可以移除，async管道会自动处理订阅和取消订阅，避免内存泄漏：

修改后的组件代码片段：

ngOnInit() {
  this.cargarVistaPreviaEntrevista();
  // 直接赋值Observable，无需额外处理
  this.perfiles$ = this.integradorService.listPerfiles();
  // 若需调试，可保留订阅，但建议用tap操作符替代
  // this.perfiles$ = this.integradorService.listPerfiles().pipe(
  //   tap(perfiles => console.log('Perfiles:', perfiles)),
  //   catchError(error => {
  //     console.error('Error al obtener perfiles:', error);
  //     return of([]);
  //   })
  // );
}

3. 验证数据结构匹配 #

确保后端返回的JSON数组中，每个对象都包含name字段，与Perfil接口定义一致。如果后端返回的字段名不同（比如nombre），需要调整optionLabel或映射数据：

示例（若字段名不匹配）：

this.perfiles$ = this.integradorService.listPerfiles().pipe(
  map(perfiles => perfiles.map(p => ({ name: p.nombre })))
);

4. 确认PrimeNG模块已导入 #

确保在当前组件所属的模块中导入了DropdownModule：

import { DropdownModule } from 'primeng/dropdown';

@NgModule({
  imports: [
    // ...其他模块
    DropdownModule
  ]
})
export class YourModule { }

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