如何处理具有角度反应形式的多个复选框

Question

我有来自 API 调用的汽车相关数据，我在 angular ag-grid 中显示这些数据。我有一些默认选项和一些自定义选项，用户可以自己选择。我还需要为用户提供一个选项来选择自定义选项。 如果用户单击编辑，我将在 ag-grid 中为用户提供一个编辑选项，一个 mat-dialog 将打开所有带有复选框的自定义选项，用户可以通过单击复选框来选择该选项。 如果用户下次尝试编辑自定义选项，则应选中先前选择的选项复选框，以便用户可以知道他已经选择了哪些选项。

我在将已选择的选项显示为选中时遇到问题，谁能告诉我如何实现这一点。 我在此链接下复制了相同的场景

https://stackblitz.com/edit/ag-grid-with-edit-funcion?file=src%2Fapp%2Fapp.component.ts

如果用户选择编辑第一行，我将使用以下数据在 ag-grid 行中显示引擎和座椅套复选框应自动选中。

{
  no: 1,
  make: "Toyota",
  model: "Celica",
  price: 35000,
  fields: ["engine", "seat-covers"]
},
{
  no: 2,
  make: "Ford",
  model: "Mondeo",
  price: 32000,
  fields: ["engine", "body-material", "seat-covers"]
},
{
  no: 3,
  make: "Porsche",
  model: "Boxter",
  price: 72000,
  fields: ["engine", "body-material", "seat-covers"]
}

Answer 1

您需要，在创建 formArray 时使用 this.data.selectedRow.fields 的值

  buildTaskFields() {
    const arr = this.allColumns.map(element => {
      return this.fb.control(this.data.selectedRow.fields.indexOf(element)>=0);
    });
    return this.fb.array(arr);
  }

查看 formArray 获取值，例如[真、假、假、真]

在 submitButton 中，我们使用 formArray 的值形成一个数组

  onSave() {
    const value=this.businessConfigForm.value.taskFieldsArray
    this.data.selectedRow.fields=this.allColumns.filter((x,index)=>value[index])
    this.dialogRef.close(null);
  }

看到，当我们将行的对象本身作为数据传递时，我们可以在对话框组件中进行更改，并且我们不需要管理检查的“更改事件”

你的forked stackblitz

注意：您可以在this SO 中看到另一种管理复选框列表的方法，在这种情况下您不需要创建 formArray，只需使用变量array=[...this.data.selectedRow.fields]（您需要复制）

更新如果我们想添加新功能，

首先是allColumns属于主组件，所以我们需要在data中传入这个数组，所以要编辑

 this.dialog.open(AddConfigComponent, {
        const selectedRow = evt.data;
        data: {
          data: selectedRow,
          features:allColumns
        }

在构造函数中

   if (data) {
      this.data = data.data;
      this.allColumns=data.features;
    }

好吧，现在再次添加一个新特征，当我们传递数组本身时，我们可以在保存中使用

   this.data.push("another characteristic")
   this.dialogRef.close(null);

更新 2 如果我们的特征是对象类型 {name:...} 而不仅仅是字符串，我们需要更改一些保存和 buildEditTaskFields

  buildEditTaskFields() {
    const arr = this.allColumns.map(element => {
      //value becomes true if exist and object with name equal to the element
      //see how we use find
      const value=this.data.fields.find(f=>f.name==element)!=null;

      return this.fb.control(value);
    });
    return this.fb.array(arr);
  }

在保存中，过滤数组AllColumns后，我们将字符串数组“映射”到对象数组，有些像

  onSave() {
    const value = this.businessConfigForm.value.taskFieldsArray;
    //the filter makes, e.g. the result is ["engine", "body-material"]
    this.data.fields = this.allColumns.filter(
      (x, index) => value[index]
      //the map becomes to [{name:"engine"},{name:"body-material"}]
    ).map(x=>({name:x}));
    this.dialogRef.close(null);
  }