Angularjs 如何使一个选择的选项依赖于另一个选择？

使用Angular 2：基本上，如果在第一个下拉列表中选择了

attr1

，我希望

ops1

填充第二个下拉列表，如果在第一个下拉列表中选择了

attr2

，则选择

ops2

，依此类推。我尝试将

*ngSwitch

添加到

select

和

选项

，但后来发现您只能向元素添加一个

*

。我也希望这是实时更新。换句话说，如果用户首先选择

attr1

，然后切换到

attr2

，则应相应地更新第二个下拉列表

<div class="form-group">
    <label for="attribute">Attribute</label>
    <select class="form-control" id="attribute" [(ngModel)]="model.attribute" name="attribute" required>
        <option *ngFor="let attr of attributes" [value]="attr">{{attr}}</option>
    </select>
</div>

<div class="form-group">
    <label for="operator">Operator</label>
    <select class="form-control" id="operator" [(ngModel)]="model.operator" name="operator" required>
        <option *ngFor="let op of operators" [value]="op">{{op}}</option>
    </select>
</div>

export class MyModelFormComponent {
      attributes = ['attr1', 'attr2'... 'attrN'];
      ops1 = ['x', 'y', 'z'];
      ops2 = ['A', 'B', 'C'];
      ...

      model = new MyModel();

}

属性
{{attr}}
操作人员
{{op}}
导出类MyModelFormComponent{
属性=['attr1'，'attr2'…'attrN']；
ops1=['x'，'y'，'z']；
ops2=['A'，'B'，'C']；
...
model=新的MyModel（）；
}

我创建了一个字典/对象，其中运算符作为值，属性作为键。运算符的代码如下所示：

<select class="form-control" id="attribute" [(ngModel)]="model.attribute" name="attribute" required>
...
<option *ngFor="let op of operators[model.attribute]" [value]="op">{{op}}</option>

...
{{op}}

我创建了一个字典/对象，其中运算符作为值，属性作为键。运算符的代码如下所示：

<select class="form-control" id="attribute" [(ngModel)]="model.attribute" name="attribute" required>
...
<option *ngFor="let op of operators[model.attribute]" [value]="op">{{op}}</option>

...
{{op}}