反应性表单根据第一次选择中的值过滤/更新第二次选择

Question

没有人有一个很好的反应形式示例，该示例如何基于父（第一个）选择-所选值/选项来过滤子（第二个）选择值？ Link to the example code 例如，我首先选择包含两个选项Magic1和Magic2的内容。然后，我第二次选择包含两个选项Magic3和Magic4的内容。我想要实现的是，如果我在第一个选择中选择了Magic1，它会在第二个选择中自动预选Magic3（因为ParentId == 1），几乎检查了父ID，然后选择了信息。用户模型：

export interface User {
  id: number;
  firstName: string;
  lastName: string;
  about: string;
  features: IFeatureList[];
  childFeatures: IChildFeatureList[];
}

export interface IFeatureList {
  FeatureId: string;
  FeatureName: string;
}

export interface IChildFeatureList {
  ParentId: number;
  FeatureId: string;
  FeatureName: string;
}

FakeData：

const fakeData = {
  id: 0,
  firstName: 'Cory',
  lastName: 'Rylan',
  about: 'Web Developer',
  features: [
    { FeatureId: "1", FeatureName: "magic1" },
    { FeatureId: "2", FeatureName: "magic2" }
  ],
  childFeatures: [
    { ParentId: 1, FeatureId: "3", FeatureName: "magic3" },
    { ParentId: 2, FeatureId: "4", FeatureName: "magic4" }
  ]
};

我是否需要使用类似 this.form.get（'features'）。valueChanges.subscribe（...）的内容？ https://angular.io/api/forms/AbstractControl#valueChanges