根据接收到的数据，使多个复选框处于“已在Angular中选中”状态

编程问答 2022-06-08

问题描述

我想标记多个复选框，这些复选框基于我检索到的数据，换句话说，保持该状态与提交表单时相同， 我有一个带有多个复选框的表单，还有一个编辑按钮，可让我编辑表单，同时很容易为input[text]检索相同的数据，但我不知道该如何更改我收到的数据中“已检查”复选框的状态为数组["M","3XL","7XL","10XL"]形式。

enter image description here

现在，我要在用户单击“编辑”按钮时提交表单时保持选中这些复选框。

Component.ts 

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

  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组复选框，并且我为每个复选框创建了一个单独的数组，如果有比为每个数组创建数组更好的方法，则我还有更多的复选框会很感激的。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangular2-formsjavascript