如果值匹配，如何检查角度材料复选框

Question

如何比较 2 个对象数组以及何时匹配值然后检查角度材料复选框？例如：在这种情况下，operator 对象匹配，因此检查了运算符的复选框

app.ts

const arr1 = [ 
   { 
      "id":"1",
      "name":"operator"
   },
   { 
      "id":"2",
      "name":"admins"
   },
   { 
      "id":"3",
      "name":"client"
   },
   { 
      "id":"4",
      "name":"developer"
   }
]
const arr2 = [ 
   { 
      "id":"1",
      "name":"operator"
   },
   { 
      "id":"3",
      "name":"client"
   }
]

this.arr1.forEach(a1Obj => {
    this.arr2.some(a2Obj => {
        if (a2Obj.id === a1Obj.id) {
            console.log(a1Obj);
        }
    })
});

app.html

<div class="col" *ngFor="let group of groups; let i = index">
    <mat-checkbox value="group.id" [labelPosition]="'after'" [checked]="true" (change)="assignGroups($event, group.id)">
        {{ group.name }}
    </mat-checkbox>
</div>

Answer 1

您可以添加一个数组，您将在其中推送公共值，然后每次使用 isCommonElt 函数检查当前组是否存在于 commonArray 中：

TS 文件

commonArray = [];
this.arr1.forEach(a1Obj => {
  this.arr2.some(a2Obj => {
    if (a2Obj.id === a1Obj.id) {
      console.log(a1Obj);
      this.commonArray.push(a1Obj);
    }
  })
});

isCommonElt(id: any): boolean {
  return this.commonArray.some(elt => elt.id === id);
}

HTML 文件

<div class="col" *ngFor="let group of groups; let i = index">
    <mat-checkbox value="group.id" [labelPosition]="'after'" [checked]="isCommonElt(group.id)">
        {{ group.name }}
    </mat-checkbox>
</div>

Answer 2

尝试如下，

.ts 文件

const arr1 = [ 
   { 
      "id":"1",
      "name":"operator"
   },
   { 
      "id":"2",
      "name":"admins"
   }
];
const arr2 = [ 
   { 
      "id":"1",
      "name":"operator"
   },
   { 
      "id":"3",
      "name":"client"
   }
];

isEnableCheckbox: boolean = false;

constructor() {
  this.isEnableCheckbox = this.checkIsObjectIsEqual();
}

checkIsObjectIsEqual() {
    // The below resultArray will give the common objects from the both comparing arrays
    let resultArray = this.array1.filter(a1Obj => {
        return this.array2.some(a2Obj => {
            return a2Obj.id === a1Obj.id;
        });
    });

    if (resultArray.length > 0) {
        return true;
    } else {
        return false;
    }
}

.html 文件

<mat-checkbox [checked]="isEnableCheckbox">some label</mat-checkbox>