如何使用ngFor循環根據前兩個選定值選擇第三個值列表

Question

我有一個包含四個選擇字段的表單。 分別為分科，學期和科目。 我想根據選定的分支和學期顯示主題選項列表。 我應該創建哪種類型的JSON或數組？ 以及如何在角度7中使用* ngFor進行循環。

Answer 1

通過訂閱valueChanges跟蹤FormControl中每個字段OnInit的更改。

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'
      ];
    }
  }
});

然后遍歷新的選擇選項。

您可以將選項數組轉換為具有name和value屬性的對象。 然后為它們使用單​​向屬性綁定。

<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迭代此對象的級別。