如何使用不同下拉菜单中的选项显示隐藏下拉元素

Question

我正在为用户分配角色。

用户类型有：学生、教师、家长和管理员。

所以当我 select 学生或老师作为用户从下拉列表中。我希望启用 class 和部分下拉菜单。当管理员或家长被 selected 时。 class 和部分应该被禁用。

任何帮助都会很棒。

我尝试过使用单选按钮，但下拉菜单对我不起作用。

<select matInput id="userType" class="fullWidth">
    <option value="" disabled>---Select User---</option>
    <option *ngFor = "let user of users" [ngValue]="user">{{user}</option>
 </select>
  ``` user types are student, teacher, parent and admin```
```below is the drop-down for selecting class if the user type is only student or teacher```
<select matInput id="className" class="fullWidth">
  <option value="" disabled>---Select class---</option> 
  <option *ngFor = "let class of classes"[ngValue]="class">{{class}}</option>
</select>
```class values are 1st, 2nd and 3rd```

"我希望得到以下结果当从用户类型下拉菜单中 select 编辑学生或用户时。我想要启用 class。否则应该为所有其他用户类型（即：admin 和 parent）禁用它

Answer 1

您可以使用 two-way data binding 来实现。

在您的 component.ts 上，我们将定义所需的属性：

role: string = undefined;
users : string[] = ['student', 'teacher', 'parent', 'admin'];

在您的 component.html 上，您将 <select> 元素绑定到 role，这是模型。然后，我们使用 *ngIf 将根据所选角色有条件地 show/hide 后续。在这种情况下，它只会在用户选择学生或老师时显示。

<select matInput [(ngModel)]="role" id="userType" class="fullWidth">
  <option value="" disabled>---Select User---</option>
  <option *ngFor = "let user of users" [ngValue]="user">{{user}}</option>
</select>

<select *ngIf="role === 'student' || role === 'teacher'" matInput id="className" class="fullWidth">
  <option value="" disabled>---Select class---</option> 
  <option *ngFor = "let class of classes"[ngValue]="class">{{class}}</option>
</select>

编辑 1：来自 OP -

感谢您的回复！！，但以上内容对我不起作用，或者我做错了什么。不过我找到了答案：

 <select matInput  id="userType" class="fullWidth" (change)="onChange()" [ngModel]="defaultUser">
            <option value="" disabled>---Select User---</option>
            <option value="teacher">Teacher</option>
            <option value="parent">Parent</option>
            <option value="student">Student</option>
            <option value="admin">Admin</option>
 </select>

并且在 .ts 文件中我将 onChange() 添加为：

onChange(){
    const userType = document.getElementById("userType");
    const dvClass = document.getElementById("dvClass");
    const dvTeacher = document.getElementById("dvTeacher");
    dvClass.style.display = userType.value == "student" ? "block":"none";
}

但我只想让学生和老师访问 class drop-down。我对如何将两个用户都添加到 onChange() 中的上述表达式感到困惑（即：dvClass.style.display = userType.value == "student" ? "block":"none";)

编辑 2：

以下是我根据您的更新提出的更改建议。与我的初始代码类似，我使用了双向绑定。但是，我使用 titlecase pipe 将选项的值转换为首字母大写（而不是手动定义它）。

<select matInput [(ngModel)]="role" id="userType" class="fullWidth">
  <option [ngValue]="null" disabled>---Select User---</option>
  <option *ngFor = "let user of users" [ngValue]="user">{{user | titlecase}}</option>
</select>

<br>

<select *ngIf="role === 'student' || role === 'teacher'" matInput id="className" class="fullWidth">
  <option value="" disabled>---Select class---</option> 
  <option *ngFor = "let class of classes"[ngValue]="class">{{class}}</option>
</select>

Updated demo.

如何使用不同下拉菜单中的选项显示隐藏下拉元素

how to show-hide a drop-down element with the options from a different drop-down menu

show-hide

angular-ng-if

dropdown

angular