如何获取在Angular8中选中的每个复选框的下拉列表的值

在Angular 8中获取选中的每个复选框的下拉列表的值，可以通过以下步骤实现：

首先，在HTML模板中创建一个包含复选框和下拉列表的表单。为了方便起见，我们可以使用Angular的表单模块来处理表单数据。示例代码如下：

<form [formGroup]="myForm">
  <div *ngFor="let option of options">
    <input type="checkbox" [value]="option" formControlName="checkboxes">
    <select *ngIf="myForm.controls.checkboxes.value.includes(option)" formControlName="dropdowns">
      <option *ngFor="let item of dropdownOptions" [value]="item">{{ item }}</option>
    </select>
  </div>
</form>

在组件类中，需要导入相关的模块和服务，并创建表单控件和相关数据。示例代码如下：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
  myForm: FormGroup;
  options: string[] = ['Option 1', 'Option 2', 'Option 3'];
  dropdownOptions: string[] = ['Value 1', 'Value 2', 'Value 3'];

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.myForm = this.formBuilder.group({
      checkboxes: this.formBuilder.array([]),
      dropdowns: this.formBuilder.array([])
    });
  }
}

接下来，需要编写逻辑来处理复选框和下拉列表的值变化。可以使用valueChanges方法来监听表单控件值的变化，并更新相应的下拉列表。示例代码如下：

ngOnInit() {
  this.myForm = this.formBuilder.group({
    checkboxes: this.formBuilder.array([]),
    dropdowns: this.formBuilder.array([])
  });

  this.myForm.controls.checkboxes.valueChanges.subscribe((values: string[]) => {
    const dropdownsArray = this.myForm.controls.dropdowns as FormArray;
    dropdownsArray.clear();

    values.forEach((value: string) => {
      dropdownsArray.push(this.formBuilder.control(''));
    });
  });
}

最后，可以在组件类中添加一个方法来获取选中的复选框和下拉列表的值。示例代码如下：

getSelectedValues() {
  const checkboxesArray = this.myForm.controls.checkboxes as FormArray;
  const dropdownsArray = this.myForm.controls.dropdowns as FormArray;

  const selectedValues = checkboxesArray.controls
    .map((control, index) => control.value ? dropdownsArray.controls[index].value : null)
    .filter(value => value !== null);

  console.log(selectedValues);
}

通过调用getSelectedValues方法，即可获取选中的每个复选框的下拉列表的值。

这是一个基本的示例，你可以根据实际需求进行修改和扩展。同时，腾讯云也提供了一系列与Angular相关的产品和服务，例如云服务器、云数据库、云存储等，你可以根据具体需求选择相应的产品。更多关于腾讯云产品的信息，请参考腾讯云官方文档：腾讯云产品与服务。