Как использовать цикл ngFor для выбора третьего списка значений на основе первых двух выбранных значений

Question

У меня есть форма с четырьмя полями выбора. Соответственно ветвь, семестр и тематика. Я хочу показать список вариантов темы в соответствии с выбранной ветвью и семестром. Какой тип JSON или Array я должен создать? И как пройти через это, используя * ngFor в angular 7.

Answer 1

Отслеживайте свои изменения для каждого поля OnInit в FormControl через подписку на valueChanges.

branch = ['Computer', 'Civil', 'Electronics','Mechanical' ];
semester = ['1st', '2nd', '3rd','4th','5th','6th', '7th', '8th'];
formGroup: FormGroup;
subjectOptions: [] = [];
constructor(private fb: FormBuilder) {}

ngOnInit(): void {
  // I like to use Formbuilder b/c the syntax is less verbose.
  this.formGroup = this.fb.group({
    branch: '',
    semester: '',
    subject: '',
  });

  this.formGroup.valueChanges.subscribe(newGroupValue => {
    // Match criteria
    if (newGroupValue.branch === 'Computer' && newGroupValue.semester === '3rd') {
      // However you want to generate a new array of options to display in select
      this.subjectOptions = [
       'C++','Data Structure','DE'
      ];
    }
  }
});

Затем переберите новые опции выбора.

Вы можете превратить массив опций в объект, который имеет свойства для имени и значения. Затем используйте для них одностороннее связывание свойств.

<div [formGroup]="formGroup">
  // Rest of the dropdowns above w/ corresponding formControlName
  <select formControlName="subject">
     <option *ngFor="let option of subjectOptions" [name]="option.name" [value]="option.value"></option>
  </selct>
</div>

Если вы не хотите выполнять множество других операций, вы можете настроить параметры так, чтобы они выглядели примерно так.

const branches = {
    computer: {
        name: 'Computer',
        semesters: {
            third: {
                name: '3rd',
                subjects: {
                    c: {
                        name: 'C++'
                    },
                    'data-structure': {
                        name: 'Data Structure'
                    }
                }
            }
        }
    }
}

Вы можете использовать объект Map ... и т. Д. ... Пока он доступен по ключу.

Затем в valueChange вашей формы внутри обратного вызова подписки:

this.formGroup.valueChanges.subscribe(newGroupValue => {
   if (newGroupValue.branch && newGroupValue.semester) {
      this.subjectOptions = branches[newGroupValue.branch].semesters[newGroupValue.semester].subjects;
   }
}

Оттуда вы можете использовать KeyValuePipe для итерации по уровням этого объекта.