Html 在Angular中，如何根据先前的选择操作选项标记中显示的内容？

我正在努力寻找第二个解决方案，以解决我如何实现这一点。首先，我将向您展示它是如何实现的，然后解释它需要如何更改

html:

会议：
选择会话。。。
{{session.sessionName}
报告日期：
选择报告日期。。。
{{报告}
检索

组件1.ts：

export class OrderExceptionReportComponent implements OnInit {

  public sessionData: ExceptionReportSessionData[] = [];
  public sessionReportData: ExceptionReportData;
  public sessionReportFilter: ExceptionReportFilter = {
    sessionName: "Washington",
    fileName: "EXCEPTION20130211060056882.csv"
  }
  reports = [];
  cols = [
    { header: 'ItemId' },
    { header: 'AltItemId' },
    { header: 'GenName' },
    { header: 'StationName' },
    { header: 'HospitalCode' },
    { header: 'Facility' },
    { header: 'Reason' }
  ];

  constructor(private orderExceptionReportService: OrderExceptionReportService) {  
  }

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

  public async orderExceptionReportData(): Promise<void> {
    return this.orderExceptionReportService.OrderExceptionReport(this.sessionReportFilter)
      .then(
        data => {
          this.sessionReportData = data;
          console.log(this.sessionReportData)
        });
  }

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

  }

  sessionDataChange(evt) {
    const value = evt.target.value; 

    if (isNaN(Number(value))) {
      this.reports = [];
    } else {
      this.reports = this.sessionData[Number(value)].reportFiles;
    }
    console.log(this.reports);
  }

}

导出类OrderExceptionReportComponent实现OnInit{
公共会话数据：例外报告会话数据[]=[]；
公共会话报告数据：例外报告数据；
public sessionReportFilter:ExceptionReportFilter={
会议名称：“华盛顿”，
文件名：“例外20130211060056882.csv”
}
报告=[]；
cols=[
{标题：'ItemId'}，
{header:'AltItemId'}，
{头：'GenName'}，
{标题：'StationName'}，
{标题：'HospitalCode'}，
{header:'Facility'}，
{头：'原因'}
];
构造函数（专用orderExceptionReportService:orderExceptionReportService）{
}
公共异步getExceptionReportSessionData（）：承诺{
返回此.orderExceptionReportService.GetExceptionReportSessionData（）
.那么(
数据=>{
this.sessionData=数据；
});   
}
公共异步orderExceptionReportData（）：承诺{
返回此.orderExceptionReportService.OrderExceptionReport（此.sessionReportFilter）
.那么(
数据=>{
this.sessionReportData=数据；
console.log（this.sessionReportData）
});
}
异步ngOnInit（）{
等待此消息。getExceptionReportSessionData（）；
}
会话数据更改（evt）{
常量值=evt.target.value；
if（isNaN（数字（值）））{
此参数为：reports=[]；
}否则{
this.reports=this.sessionData[Number（value）].reportFiles；
}
console.log（this.reports）；
}
}

---

现在，正如您在我的第一个下拉列表中看到的，

[value]

被设置为i，因此我调用的函数

（change）

可以在第二个下拉列表中获得正确的数据显示。我需要将

[value]

设置为session.sessionName，因为我使用的是双向数据绑定，因此当用户单击“检索”按钮时，会将正确的数据发送到函数。如何更改实现，以便用户根据哪个

会话

在下拉列表中选择与

会话

关联的

报告日期

是正确的，以便我可以使用双向数据绑定在按钮

检索

上进行函数调用

一种简单的方法是在会话选择上发生

change

事件时更新报告选择的

sessionData

。你有几种方法，我给你推荐一种简单的方法

组件技术

component.html

会议：
选择会话。。。
{{session.SessionName}
报告日期：
选择报告日期。。。
{{报告}

上述想法的直接实现。就像我提到的，有几种方法可以做到这一点

---

将html更改为：-

<div class="input-group">
    <h4>Session: </h4>
    <select class="custom-select form-control-sm" id="inputGroupSelect01"
            (change)="sessionDataChange($event)" [(ngModel)]="sessionReportFilter.sessionName">
      <option value="null">Select session...</option>
      <option *ngFor="let session of sessionData; index as i;"
              [value]="session.sessionName">
        {{session.sessionName}}
      </option>
    </select>
  </div>
  <div class="input-group">
    <h4>Report Date: </h4>
    <select class="custom-select form-control-sm" id="inputGroupSelect01"[(ngModel)]="sessionReportFilter.fileName">
      <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" (click) ="orderExceptionReportData()">Retrieve</button>
  </div>
</div>

---

我得到的只是第二个选择框中的一个空数组。很抱歉，我错误地绑定到了错误选择的

selectionChange

事件。我们想要监听会话选择上的更改，并在更改时调用处理函数

sessionChange

。现在检查在会话select上进行选择时是否调用了该函数。仍然会得到任何空数组。我已经用你的实现更新了我的问题。你能看看我是不是在什么地方犯了个错误吗？那部分看起来不错。。您处理服务响应的方式看起来有点奇怪。。会话选择是否实际获取数据。。我认为您不需要

async

，也不需要在

getExceptionReportSessionData

函数中返回值。。当

sessionData

change的值时，模板将被更新，这意味着选项将被加载这里有几个原因我使用异步，但这是另一个讨论。我再次更新了我的问题，说明我的服务响应是如何真正实现的，换句话说，我只是在测试一些东西。是的，我正在取回真实数据，因为我的第一个选择框中填入了数据库中的正确数据。请在下面找到我的答案。@AakashGarg更新了问题。你能分享这个结果吗。sessionData？（控制台日志图片将非常棒）@JadenAdams你尝试过我提供的解决方案吗？是的，没有运气

sessions: ExceptionReportSessionData[] = []; // the list obtained from service
reports: string[] = []; // the reports list

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

<div class="input-group">
    <h4>Session: </h4>
    <select class="custom-select form-control-sm" id="inputGroupSelect01"
            (change)="sessionDataChange($event)" [(ngModel)]="sessionReportFilter.sessionName">
      <option value="null">Select session...</option>
      <option *ngFor="let session of sessionData; index as i;"
              [value]="session.sessionName">
        {{session.sessionName}}
      </option>
    </select>
  </div>
  <div class="input-group">
    <h4>Report Date: </h4>
    <select class="custom-select form-control-sm" id="inputGroupSelect01"[(ngModel)]="sessionReportFilter.fileName">
      <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" (click) ="orderExceptionReportData()">Retrieve</button>
  </div>
</div>

sessionDataChange(evt) {
    const sessionName= evt.target.value; 

    if (!sessionName || sessionName.length === 0) {
      this.reports = [];
    } else {
      this.reports = this.sessionData.find((session) => session.sessionName === sessionName).reportFiles;
    }
    console.log(this.reports);
  }