如何使用 ngFor 循环根据前两个选定值选择第三个值列表答案

【问题标题】：How to use ngFor loop to select third value list based on first two selected values如何使用 ngFor 循环根据前两个选定值选择第三个值列表
【发布时间】：2019-04-02 18:55:18
【问题描述】：

我有一个包含四个选择字段的表单。分别是分支、学期和学科。我想根据所选的分支和学期显示主题选项列表。我应该创建哪种类型的 JSON 或数组？以及如何在 Angular 7 中使用 *ngFor 循环。

【问题讨论】：

标签： arrays json angular angular6 angular7

【解决方案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'
      ];
    }
  }
});

然后循环遍历新的选择选项。

您可以将选项数组制作成具有名称和值属性的对象。然后为它们使用单向属性绑定。

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

如果你不想做很多 if else，你可以设置你的选项看起来像这样。

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 遍历此对象的关卡。

【讨论】：

有什么方法可以使用 *ngFor="let sub of branch.sem" 我们可以动态改变 "branch" 和 "sub" 值意味着 "branch.sem" 值来获取 json 对象科目
如果我理解正确，对于每个分支，您都有嵌套在学期属性下的孩子。像这样的东西？ branch = { sem: [{subject: [...subjects]}]}你能告诉我你的模型吗？
我有两个简单的数组：branch = ['Computer', 'Civil', 'Electronics','Mechanical' ];和学期 = ['1st', '2nd', '3rd','4th','5th','6th', '7th', '8th'];所以我可以使用 *ngFor 轻松循环。但是现在基于这两个选择，我想获得第三个选择字段的选项，该字段根据所选分支和 sem 显示主题。例如：如果我选择 computer 和 3rd sem 那么第三个字段应该显示主题选项 C++,DataStructure,DE。
我稍微更新了上面的代码以匹配您最后的评论。似乎可能有很多组合，所以我建议制作一个嵌套它们的复杂对象，然后使用 *ngFor 中的 KeyValuePipe 来映射该对象。 (angular.io/api/common/KeyValuePipe)
那么我将不得不使用很多 else if 条件。因为我有 4 个分支，每个分支 8 个学期。大约 32 岁。:)