更改一个下拉列表中的索引需要在另一个下拉菜单中以角度和字体设置所选选项

Question

我是angular的新手，我需要一些帮助来满足以下要求：

我的角度模板中有两个下拉菜单，我想要的是，当我在一个下拉菜单中更改索引时，应该在另一个下拉列表中选择特定的选项(值(。这两个下拉列表都是从API获取它们的值，并使用双向绑定。

例如，如果第一个下拉列表包含学生姓名，而我在该下拉列表中选择了另一个选项，则第二个下拉列表(包含一年级、二年级等课程(应自动为该学生选择，即，如果我选择了学生，比如"John"，如果他正在二年级学习，则下拉列表2应将所选选项设置为二年级。

我这么做的目的：

我在第一个选择选项中使用了(更改(事件，我在第二个下拉列表中获得了所需的值，但我不确定如何将其分配给第二个列表。

第一次下降：

<select
class="form-control form-control-lg form-control-solid"
name="studentId"
[(ngModel)]="model.studentId"
required
#studentId="ngModel"
(change)="getClassByStudent(studentId.value)"
>
<option
*ngFor="let student of studentList"
value="{{ student .id }}"
>
{{ student.studentName}}
</option>
</select>

第二个下拉菜单：

<select
class="form-control form-control-lg form-control-solid"
name="classId"
[(ngModel)]="model.classId"
required
#classId="ngModel"
>
<option
*ngFor="let class of classList"
value="{{ class.id }}"
>
{{ class.className }}
</option>
</select>

TypeScript:

getClassByStudent(studentId) {
debugger;
this.commonService.API_URL = 
`${environment.apiUrl}/admin/studentClass/${studentId}`;
this.commonService.getList().subscribe(
response => {
this.classAsPerStudent = response?.data;
this.classId= this.classAsPerStudent.studentId
});
}

Answer 1

这个问题缺少很多信息。我仍然试图复制这个场景，并解决了这个问题。

因此，假设CommonService上的getList方法返回的数据如下所示：

{
"data": {
"studentId": 5
}
}

您需要在subscribe块中将其设置为this.model.classId，而不是this.classId。

getClassByStudent(studentId) {
// ...
this.commonService.getList().subscribe((response: any) => {
this.classAsPerStudent = response.data;
this.model.classId = this.classAsPerStudent.studentId; // <----- HERE
});
}

第二件事是，第二个select列表中的所有option的值都是coaches.id，而应该是class.id：

<select
class="form-control form-control-lg form-control-solid"
name="classId"
[(ngModel)]="model.classId"
required
#classId="ngModel"
>
<option
*ngFor="let class of classList"
[value]="class.id"
>
{{ class.className }}
</option>
</select>

这里有一个StackBlitz上的工作示例代码供您参考。

注意：从第一个列表中选择任何学生，并注意到第二个选择列表中的选项将更改为Class 5。它只会一直更改为Class 5，因为在我的模拟中，我已经将studentId硬编码为5。