如何根据来自两个不同数组的值匹配检查复选框？答案

【问题标题】：How to have checkboxes checked based on values are matching from two different arrays?如何根据来自两个不同数组的值匹配检查复选框？
【发布时间】：2020-08-31 08:50:39
【问题描述】：

如果数组包含 array2 的值，我正在尝试检查特定的框。

HTML：

<section class="example-section">
  <mat-label>someLabel</mat-label>
  <mat-checkbox
    class="example-margin"
    *ngFor="let option of options; let i = index"
    #checkBox
    [value]="option"
    name="option "
    (change)="getCheckbox(checkBox)">
    {{ option }}
  </mat-checkbox>
</section>

TS：

这里我比较两个数组，看看 array1 值是否与 array2 值匹配。如果 array1 匹配设置 isCheck 标志为真。否则为假。但似乎这个逻辑在某种程度上是正确的。

@Component()
class SomeComponent {
  isChecked: boolean;
  user = {
    option: ['1111', '2222', '3333', '4444']
  };
  optionValues: string[] = [
    '8045',
    '4444',
    '8069',
    '8155',
    '2222',
    '8220',
    '8299',
    '3333',
    '8344',
    '8396',
    '8397',
    '8495',
    '1111',
  ];

  test() {
    this.user.option.forEach(user => {
      this.optionValues.forEach(element => {
        console.log(element + ' @@@@@ ' + user);
        if (element == user) {
          console.log('Found match @@@@' + element);
          isChecked = true;
        } else {
          console.log('No Match @@@@' + element);
          isChecked = false;
        }
      });
    });
  }
}

尝试

HTML：

<section class="example-section">
  <mat-label>someLabel</mat-label>
  <mat-checkbox
    class="example-margin"
    *ngFor="let option of options; let i = index"
    #checkBox
    [value]="option"
    name="option "
    [checked]="isChecked"
    (change)="getCheckbox(checkBox)">
    {{ option }}
  </mat-checkbox>
</section>

但这会将我的值设置为 false，因为它似乎只在循环完成后才进入组件以提取“isChecked”值。

示例输出：

8045 @@@@@ 8069
No Match @@@@8045
1111@@@@@ 1111
**Found match @@@@1111**
8155 @@@@@ 8069
No Match @@@@8155
8220 @@@@@ 8069
No Match @@@@8220
8299 @@@@@ 8069
No Match @@@@8299
8344 @@@@@ 8069
No Match @@@@8344
8396 @@@@@ 8069
No Match @@@@8396
8397 @@@@@ 8069

我所有的复选框都将被取消选中。根据我目前的逻辑，因为“isChecked”的最终值为假。为了让 HTML 在使用 ngFor 循环时检查 isChecked 的值，我需要做哪些步骤或更改？

【问题讨论】：

如果你能提供一个stackblitz会更好。目前很难知道数组的结构以及您要完成的工作。
如果复选框值与数组 this.user.option 匹配，我只想检查复选框。
Check this.
@developer033 这非常有帮助！谢谢你。我只有一个问题，如何将“this.user.option”数组转换为 selectedOptions: Record = { 1111: true};如果这有任何意义。
因此，数组（user.option）是动态的，如何将这些值设置为 selectedOptions 数组为 {string,boolean}？

标签： angular checkbox angular-material

【解决方案1】：

您可以将Array 中的选项转换为Object，如下所示：

// Pre selected options that come from somewhere 
const preSelectedOptions: readonly string[] = ['8045','8069','8155','8220','8299'];

// Here you'll have { 8045: true, 8069: true } and so on...
readonly selectedOptions = preSelectedOptions.reduce<Record<string, boolean>>(
  (previousValue, currentValue) => ({
    ...previousValue,
    [currentValue]: true,
  }),
  {},
);

...为什么？这样做，最好使用[(ngModel)]在HTML中绑定，像这样：

<section class="example-section">
  <mat-label>someLabel</mat-label>
  <mat-checkbox
    class="example-margin"
    name="option"
    *ngFor="let option of optionValues"
    [value]="option"
    [(ngModel)]="selectedOptions[option]">
    {{ option }}
  </mat-checkbox>
</section>

DEMO

【讨论】：