Angular 8，当一个下拉列表被选中，另一个被选中时，我如何创建一个反应性？

在Angular 8中，你可以使用响应式编程来实现当一个下拉列表被选中时，另一个下拉列表被选中的功能。下面是一个实现的示例：

首先，在组件的HTML模板中定义两个下拉列表，并使用[(ngModel)]指令来绑定它们的值：

<select [(ngModel)]="firstDropdownValue" (change)="onFirstDropdownChange()">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

<select [(ngModel)]="secondDropdownValue">
  <option value="optionA">Option A</option>
  <option value="optionB">Option B</option>
  <option value="optionC">Option C</option>
</select>

在组件的Typescript代码中，定义两个变量来存储下拉列表的值：

firstDropdownValue: string;
secondDropdownValue: string;

创建一个方法来监听第一个下拉列表的变化，并根据选中的值来更新第二个下拉列表的值：

onFirstDropdownChange() {
  if (this.firstDropdownValue === 'option1') {
    this.secondDropdownValue = 'optionA';
  } else if (this.firstDropdownValue === 'option2') {
    this.secondDropdownValue = 'optionB';
  } else if (this.firstDropdownValue === 'option3') {
    this.secondDropdownValue = 'optionC';
  }
}

这样，当第一个下拉列表的值发生变化时，会触发onFirstDropdownChange()方法，根据选中的值来更新第二个下拉列表的值。

这个功能的优势是可以实现动态的下拉列表联动，根据用户的选择来自动更新相关的选项。适用场景包括表单中的级联选择、依赖关系的选项等。

腾讯云相关产品和产品介绍链接地址：