как показать-скрыть выпадающий элемент с опциями из другого выпадающего меню

Question

Я назначаю роли пользователю.

Типы пользователей: ученик, учитель, родитель и администратор.

Поэтому, когда я выбираю ученика или учителя в качестве пользователя из выпадающего списка.я хотел, чтобы класс и раздел раскрылись.и когда выбран админ или родитель.класс и раздел должны быть отключены.

любая помощь будет отличной.

Я пробовал это с переключателями, но выпадающие меню не работают для меня.

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

"Я ожидаю следующеерезультат, когда студент или пользователь выбирается из выпадающего меню типа пользователя. Я хотел, чтобы класс был включен. В противном случае он должен быть отключен для всех других типов пользователей (а именно: admin и parent) "

Answer 1

Для этого можно использовать двустороннюю привязку данных .

В ваших 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:

Вот мои предлагаемые изменения, основанные на вашем обновлении.Как и в моем исходном коде, я использовал двухстороннее связывание.Однако я использовал pipecase заголовка для преобразования значений параметров, чтобы первая буква была заглавной (вместо ее определения вручную).

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

Обновленная демонстрация .