Início / coding / Perguntas / 79567755
Accepted
Brian
Asked: 2025-04-11 07:55:29 +0800 CST

As opções selecionadas não são preenchidas ao recarregar

  • 772

Aplicação Angular tentando preencher as opções em um select com resultados de uma chamada de API:

<select class="select input input-bordered" formControlName="student" (change)="onStudentChange($event)" >
          <option *ngFor="let student of students" value="{{student._id}}">{{ student.name }}</option>
</select>

ngOnInit:

  ngOnInit(): void {
    this.userService.getStudentsByUser(this.authService.currentUserSig()?._id!).subscribe((response) => {
      this.students = response;
    });
  }

O que estou perdendo aqui? Ao depurar localmente e salvar o arquivo HTML, ele preenche magicamente, mas desaparece ao atualizar.

angular

1 respostas

  1. Best Answer

    Você já tentou carregar a lista de valores usando asyncpipe? Parece uma boa opção aqui. Isso garantirá que não haja conflitos de tempo e, quando a chamada assíncrona for concluída e não estiver vazia, preencherá a lista.

    Primeiro, reescreva o código do seu componente para que, em vez de assinar diretamente, você atribua o valor de getStudentsByUsera uma variável.

    studentsByUser$: Observable<YourType>;

ngOnInit(): void {
  // Can be done in constructor too
  this.studentsByUser$ = this.userService.getStudentsByUser(this.authService.currentUserSig()?._id!)
  .pipe(
    // You can implement a fallback mapping, to return a value for an empty list
    map(listOfStudens => listOfStudents.length ? listOfStudents : [{/* Your fake value */}])
  );
}

    Depois é só ajustar o uso no modelo.

    <select class="select input input-bordered" formControlName="student" (change)="onStudentChange($event)" >
  <option *ngFor="let student of studentsByUser$ | async" value="{{student._id}}">{{ student.name }}</option>
</select>
    • 1

relate perguntas