Angular 如何根据两个不同数组中匹配的值选中复选框？

如果数组包含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>

<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>

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

尝试

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>

<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>

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”的最终值为false。在使用ngFor循环时，我需要执行哪些步骤或更改才能让HTML检查isChecked的值？

您可以将

数组中的选项转换为
对象，如下所示：

// 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,
  }),
  {},
);

<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>

您可以将
数组中的选项转换为
对象，如下所示：

// 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,
  }),
  {},
);

<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>

如果你能提供一次闪电战就更好了。目前很难知道数组是如何构造的，也很难知道您要完成什么。我只想检查复选框的值是否与数组this.user.option..@developer033匹配。这非常有用！非常感谢。我只有一个问题，如何将“this.user.option”数组转换为selectedOptions:Record={1111:true}；如果这有意义的话。因此，数组（user.option）是动态出现的，我如何将这些值设置为selectedOptions数组中的{string，boolean}？如果您可以提供一个stackblitz，那就更好了。目前很难知道数组是如何构造的，也很难知道您要完成什么。我只想检查复选框的值是否与数组this.user.option..@developer033匹配。这非常有用！非常感谢。我只有一个问题，如何将“this.user.option”数组转换为selectedOptions:Record={1111:true}；因此，数组（user.option）是动态生成的，如何将这些值设置为selectedOptions数组中的{string，boolean}？