根据 Angular 中另一个选择元素的值设置选择选项答案

【问题标题】：Set selection options depending on another select element's value in Angular根据 Angular 中另一个选择元素的值设置选择选项
【发布时间】：2020-07-24 23:30:30
【问题描述】：

我有这 2 个select 标签。我希望在选择 selectedClass 时只显示该班级的学生。

  <div class="col-md-2 mb-3">
      <h3>Turma</h3>
      <select class="form-control" [(ngModel)]="selectedClass" name="class">
        <option [ngValue]="cl" *ngFor="let cl of classes">{{cl.year}} - {{cl.class}}</option>
      </select>
    </div>
    <div class="col-md-5 mb-3">
      <h3>Aluno</h3>
      <select class="form-control" [(ngModel)]="selectedStudent" name="student">
        <option [ngValue]="st" *ngFor="let st of students">{{st.name}}</option>
      </select>
    </div>

【问题讨论】：

标签： angular

【解决方案1】：

我建议您使用响应式表单，但在这种情况下您应该声明更改事件函数，例如：

<select class="form-control" [(ngModel)]="selectedClass" name="class" (ngModelChange)="classChanged($event)">
...

并在你的组件中声明这个函数：

classChanged(newVal: any) {
  ...// parse your changed value
  this.students = ... // array you need
}

学生也一样。

【讨论】：