根据先前选择的第一个下拉角度9填充选择下拉列表

Question

我在用数据填充两个下拉菜单中的第二个时遇到了问题。第一个下拉菜单让我从会话列表中选择一个，每个会话都附有ReportFiles，如下模型：

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

基于用户选择的会话，我希望第二个下拉列表填充与所选会话相关的ReportFiles。我没有问题获取会话数据。它是第二个下拉菜单，不会返回任何数据。

这是我到目前为止所拥有的。 Component.ts：

export class OrderExceptionReportComponent implements OnInit {



 public sessionData: ExceptionReportSessionData[] = [];
  newData: any;
  reports = [];

  constructor(private orderExceptionReportService: OrderExceptionReportService) {
  }

  public async getExceptionReportSessionData(): Promise<void> {
    return this.orderExceptionReportService.GetExceptionReportSessionData()
      .then(
        data => {
          this.sessionData = data;
        });

  }  


  async ngOnInit() {
    await this.getExceptionReportSessionData();

  }

  sessionDataChange(evt) {
    const value = evt.target.value;
    console.log(`session index: ${value}`);
    console.log(this.sessionData);
    if (isNaN(Number(value))) {
      this.reports = [];
    } else {
      this.reports = this.sessionData[Number(value)].ReportFiles;
    }
    console.log(this.reports);
  }


}

旁注：当我登录（reports: ${this.reports}时，它显示为undefined，我无法弄清楚为什么第二个下拉列表中返回数据的主要问题是什么

HTML：

<div class="dropdown">
  <div class="input-group">
    <h4>Session: </h4>
    <select class="custom-select form-control-sm" id="inputGroupSelect01"
            (change)="sessionDataChange($event)">
      <option value="null">Select session...</option>
      <option *ngFor="let session of sessionData; index as i;"
              value="{{i}}">
        {{session.sessionName}}
      </option>
    </select>
  </div>
  <div class="input-group">
    <h4>Report Date: </h4>
    <select class="custom-select form-control-sm" id="inputGroupSelect01">
      <option value="">Select report date...</option>
      <option *ngFor="let report of reports"
              value="report">
        {{report}}
      </option>
    </select>
  </div>
<div>
    <button type="button" class="btn btn-primary">Retrieve</button>
  </div>
</div>

另一点说明：“检索”按钮最终将进行API调用，以发送从下拉列表中选择的数据。