我正在努力寻找实现此目标的第二种解决方案。首先，我将向您展示它的实现方式，然后说明如何更改它。
html：
Pradeep,e34
Venkat,e44
Azhar,r45
Pavan,e14
Vipul,e24
Asad,r15
Kumar,e45
Akshay,e55
Vivek,e44
Pradeep,e34
Venkat,e44
Azhar,r45
Pavan,e14
Vipul,e24
Asad,r15
Kumar,e45
Akshay,e55
Vivek,e44
component.ts：
<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]="i">
{{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>
现在，如您在我的第一个下拉列表中所见，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);
}
}
设置为i，因此我在[value]上调用的函数可以在第二个下拉列表中显示正确的数据。好吧，我需要将(change)设置为session.sessionName，因为我正在使用两种方式的数据绑定，以便当用户单击检索按钮时，正确的数据将被发送到该函数。如何更改实现，以使用户基于下拉列表中选择的[value]仅与Session关联的ReportDates是正确的，因此我可以使用两种方式将数据绑定到在按钮Session上调用函数？