根据收到的数据使多个复选框的状态 Checked in Angular

Question

我想根据检索到的数据标记多个复选框已选中，或者换句话说，保持与提交表单时相同的状态，我有一个带有多个复选框的表单，还有一个编辑按钮，允许我编辑表单，同时很容易为 input[text] 检索相同的数据我无法弄清楚如何更改Checked 复选框的状态，因为我收到的数据是数组形式，看起来像这样 ["M", "3XL", "7XL", "10XL"].

现在我想在用户单击编辑按钮时提交表单时选中这些复选框。

Component.ts

  checkArrayEBXBR = [];
  checkArrayJEBXO = [];
  checkboxObject = [
    {
      checkboxLabel: "EBXBR",
      checkboxContainer: [
        {
          id: "0",
          label: "S",
          isChecked: false,
        },
        {
          id: "1",
          label: "M",
          isChecked: false,
        },
        {
          id: "2",
          label: "L",
          isChecked: false,
        },
        {
          id: "3",
          label: "XL",
          isChecked: false,
        },
        {
          id: "4",
          label: "2XL",
          isChecked: false,
        },
        {
          id: "5",
          label: "3XL",
          isChecked: false,
        },
        {
          id: "6",
          label: "4XL",
          isChecked: false,
        },
        {
          id: "7",
          label: "5XL",
          isChecked: false,
        },
        {
          id: "8",
          label: "6XL",
          isChecked: false,
        },
        {
          id: "9",
          label: "7XL",
          isChecked: false,
        },
        {
          id: "10",
          label: "8XL",
          isChecked: false,
        },
        {
          id: "11",
          label: "9XL",
          isChecked: false,
        },
        {
          id: "12",
          label: "10XL",
          isChecked: false,
        },
      ],
    },
    {
      checkboxLabel: "JEBXO",
      checkboxContainer: [
        {
          id: "0",
          label: "S",
          isChecked: false,
        },
        {
          id: "1",
          label: "M",
          isChecked: false,
        },
        {
          id: "2",
          label: "L",
          isChecked: false,
        },
        {
          id: "3",
          label: "XL",
          isChecked: false,
        },
        {
          id: "4",
          label: "2XL",
          isChecked: false,
        },
        {
          id: "5",
          label: "3XL",
          isChecked: false,
        },
        {
          id: "6",
          label: "4XL",
          isChecked: false,
        },
        {
          id: "7",
          label: "5XL",
          isChecked: false,
        },
        {
          id: "8",
          label: "6XL",
          isChecked: false,
        },
        {
          id: "9",
          label: "7XL",
          isChecked: false,
        },
        {
          id: "10",
          label: "8XL",
          isChecked: false,
        },
        {
          id: "11",
          label: "9XL",
          isChecked: false,
        },
        {
          id: "12",
          label: "10XL",
          isChecked: false,
        },
      ],
    },
  ];

  changeSelection() {
    this.fetchSelectedItems();
  }
  fetchSelectedItems() {
    this.ebxbrselectedItemsList = this.checkboxObject[0].checkboxContainer.filter(
      (value, index) => {
        return value.isChecked;
      }
    );
    this.checkArrayEBXBR = [];
    this.checkArrayJEBXO = [];
    for (let i = 0; i < this.ebxbrselectedItemsList.length; i++) {
      this.checkArrayEBXBR.push(this.ebxbrselectedItemsList[i].label);
    }
    for (let i = 0; i < this.jebxoselectedItemsList.length; i++) {
      this.checkArrayJEBXO.push(this.jebxoselectedItemsList[i].label);
    }
    console.log(this.checkArrayJEBXO)
    console.log(this.checkArrayEBXBR)
  }

component.html

<div class="form-group selection-container">
          <h5 class="form-title">SKU</h5>
          <div class="row" *ngFor="let item of checkboxObject; let i = index">
            <div class="col-12">
              <div class="form-group size-code">
                <ion-label class="item-code">{{item.checkboxLabel}}</ion-label>
                <ion-checkbox slot="end" value="pepperoni"></ion-checkbox>
              </div>
            </div>
            <div class="col-12">
              <div class="sizes-container">
                <div class="form-group" *ngFor="let innerItem of checkboxObject[i].checkboxContainer">
                  <ion-label for="{{item.id}}" >{{ innerItem.label }}</ion-label>
                  <ion-checkbox
                    slot="end"
                    [(ngModel)]="innerItem.isChecked"
                    (ionChange)="changeSelection()"
                    name="{{ innerItem.isChecked }}"
                    [value]="innerItem.label"
                    id="{{innerItem.id}}"
                  ></ion-checkbox>
                </div>
              </div>
            </div>
          </div>
        </div>

正如您还可以注意到的那样，有 2 组复选框，我为每组都创建了一个单独的数组，如果有比为每个组创建一个数组更好的方法，我还有更多这些组我很高兴知道他们。

Answer 1

如果您想要选中复选框，<ion-checkbox> 有一个名为 checked 的属性，您可以使用它来绑定一个值。案例：

<ion-checkbox
          slot="end"
          [(ngModel)]="innerItem.isChecked"
          (ionChange)="changeSelection()"
          name="{{ innerItem.isChecked }}"
          [value]="innerItem.label"
          id="{{innerItem.id}}"
          [checked]="innerItem.isChecked" // Add this line. 
></ion-checkbox>

如果值为真，该属性将使复选框保持选中状态。

根据收到的数据使多个复选框的状态 Checked in Angular

Make the state of multiple checkboxes Checked in Angular depending on the received data

javascript

angular2-forms

angular