Question

我正在为用户分配角色。

用户类型为：学生，老师，父母和管理员。

因此，当我从下拉列表中选择学生或老师作为用户时。我希望启用类和部分下拉菜单。以及选择了admin或parent时。该类和本节应禁用。

任何帮助都会很棒。

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

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

”我希望得到以下结果从用户类型下拉菜单中选择学生或用户时。我希望启用该类。否则，对于所有其他用户类型（管理员和父级），应将其禁用”

Answer 1

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

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

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

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

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

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

1 个答案: