Angular 9 来自 api 调用的数据未填充下拉列表

Question

Having some problems with filling my drop down menu with data from my API. I need help figuring out what I am doing wrong because I am getting no errors in the console.

Service.ts method call:

@Injectable({
  providedIn: 'root'
})
export class OrderExceptionReportService extends ApiServiceBase {

  private apiRoute: string = 'exception-report';
  public sessionData: ExceptionReportSessionData[];

  constructor(http: HttpClient, configService: ConfigService) {
    super(http, configService);

  }

  public async GetExceptionReportSessionData(): Promise<ExceptionReportSessionData[]> {
    if (!this.appSettings) {
      this.appSettings = await this.configService.loadConfig().toPromise();
    }

    return await this.http.get<ExceptionReportSessionData[]>(this.appSettings.apiSetting.apiAddress + this.apiRoute + '/session-data')
      .pipe(
        retry(1),
        catchError(this.handleError)
    )
      .toPromise()

  }

  }

component.ts file:

@Component({
  selector: 'app-order-exception-report',
  templateUrl: './order-exception-report.component.html',
  styleUrls: ['./order-exception-report.component.scss']
})
export class OrderExceptionReportComponent implements OnInit {

  public sessionData: ExceptionReportSessionData[];
  constructor(private orderExceptionReportService: OrderExceptionReportService) {
  }

  getExceptionReportSessionData() {
    this.orderExceptionReportService.GetExceptionReportSessionData()
      .then(
        data => {
          this.sessionData = data;
        });

  }

  ngOnInit() {

  }


}

html where I need the data:

<div class="input-group">
  <select class="custom-select" id="inputGroupSelect01">
    <option value="" *ngFor="let session of sessionData">{{session.SessionName}}</option>  
  </select>
</div>

Interface.ts file:

export interface ExceptionReportSessionData {
  SessionName: string,
  ReportFiles: Array<string>
}

Answer 1

From your comments, it appears the this.configService.loadConfig() returns an HTTP observable as well.

In that case, you could avoid using promises and streamline the process using RxJS method iff to check if the this.appSettings variable is defined and switchMap operator to switch to the target request once appSettings is retrieved.

Try the following

public GetExceptionReportSessionData(): Observable<ExceptionReportSessionData[]> {
  return iff(() => 
      this.appSettings, 
      of(this.appSettings), 
      this.configService.loadConfig().pipe(tap(appSettings => this.appSettings = appSettings))).pipe(
    switchMap(appSettings => this.http.get<ExceptionReportSessionData[]>(appSettings.apiSetting.apiAddress + this.apiRoute + '/session-data')),
    retry(1),
    catchError(this.handleError)
  );
}

tap operator is used to tap into the result and store it into this.appSettings variable. of method is used to send an observable of this.appSettings since switchMap operator expects an observable.

You could then subscribe to the function in the component

export class OrderExceptionReportComponent implements OnInit {
  public sessionData: ExceptionReportSessionData[];
  constructor(private orderExceptionReportService: OrderExceptionReportService) {}

  getExceptionReportSessionData() {
    this.orderExceptionReportService.GetExceptionReportSessionData().subscribe(
      data => { this.sessionData = data; },
      error => { }
    );
  }

  ngOnInit() {
    this.getExceptionReportSessionData();
  }
}