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

debugcn 发表于 Dev

克里希纳拉姆

我正在为用户分配角色。

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

因此，当我从下拉列表中选择学生或老师作为用户时。我希望启用类和部分下拉列表。以及选择管理员或家长时。该类和部分应该被禁用。

任何帮助都会很棒。

我已经用单选按钮尝试过这个，但下拉菜单对我不起作用。

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

“当从用户类型下拉菜单中选择学生或用户时，我希望得到以下结果。我希望启用该课程。否则应该为所有其他用户类型（即：管理员和家长）禁用它”

wentjun

您可以使用双向数据绑定来实现这一点。

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

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

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

<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";
}

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

编辑2：

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

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

更新了演示。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。