html - 根据先前选择的第一个下拉 angular 9 填充选择下拉

Question

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

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

根据用户选择的会话，我希望第二个下拉列表填充与所选会话关联的报告文件。获取 Sessions 的数据没有问题。它是第二个不返回任何数据的下拉菜单。

这是我到目前为止所拥有的。组件.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}）时，它显示为未定义，我无法弄清楚为什么在我的第二个下拉菜单中返回数据的主要问题

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 调用，发送从下拉列表中选择的数据。

标签： htmlangulartypescriptdata-binding