更改一个下拉列表中的索引需要在 angular 和打字稿中的另一个下拉列表中设置所选选项

Question

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

我的 angular 模板中有两个下拉菜单，我想要的是当我在一个下拉菜单中更改索引时，特定选项（值）应该在另一个下拉菜单中得到 selected .两个下拉菜单都从 API 获取它们的值并使用双向绑定。

例如，如果第一个下拉列表包含学生姓名，并且我在此下拉列表中 select 另一个选项，那么第二个下拉列表（其中包含类，如一年级、二年级等）应该为这个学生自动 selected 即，如果我 selected 学生说 'John' 并且如果他在二年级学习，那么下拉列表 2 应该设置 select选择二年级。

我试过的目的是：

我在第一个 select 选项中使用了 (change) 事件，我在第二个下拉列表中得到了我需要的值，但我不确定如何将它分配给第二个下拉列表。

第一个下拉菜单：

 <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>

打字稿：

 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

问题中缺少很多信息。我仍然尝试复制场景并解决了问题。

所以假设 getList 方法对你的 CommonService returns 数据看起来像这样：

{
  "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>

Here's a Working Sample Code on StackBlitz for your ref.

NOTE: Select any student from the first list and notice that the option in the second select list changes to Class 5. It will only change to Class 5 all the time coz in my mock, I've hard coded the studentId to 5.

更改一个下拉列表中的索引需要在 angular 和打字稿中的另一个下拉列表中设置所选选项

Changing the index in one dropdown needs to set the selected option in another dropdown in angular and typescript

typescript

dropdown

angular