Angular 7：如何将几个复选框（使用 *ngFor 动态生成）重置为之前的状态，只需单击一个按钮

Question

我有一个子组件，它由 3 个复选框（使用 ngFor 动态生成）和一个应用和取消按钮组成。

子的选择器标签被添加到父模板中。父组件使用@ViewChild 访问该子组件，并调用子组件公开的present() 方法，并使用如下对象作为参数，该对象由复选框的选中状态组成。

每次显示模态时，都会调用 present() 方法。 UI/复选框第一次作为父级发送的值进行更新/检查。但是，在随后对 present() 的调用中，即使 options.checked 值在 ts 文件中按预期更新，这也不会反映在 UI 中。每次显示模式时，我都希望根据 parent 在 present() 方法中发送的值来选中或取消选中复选框。需要帮忙。提前致谢

parent.component.ts：

@ViewChild(childModalComponent) childModalComponent: ChildModalComponent;

onBtnClick() {
 this.childModalComponent.present({
  checkbox1: true,
  checkbox2: false,
  checkbox3: false
 });
}

parent.component.html：

<feature-child-modal></feature-child-modal>

child.component.ts：

 @ViewChild('childModal') childModal: ElementRef;

 ngOnInit() {
    this.options = [
     {
       label: 'label1',
       value: 'value1',
       checked: false,
     },
     {
       label: 'label2',
       value: 'value2',
       checked: false,
     },
     {
       label: 'label3',
       value: 'value3',
       checked: false,
     },
  ];
 }

present(optionsState: CompressTransactionType) {
  this.options.forEach(item => {
    if(item.value == "value1"){
      item.checked = optionsState.checkbox1;
    }

    if(item.value == "value2"){
      item.checked = optionsState.checkbox2;
    }

    if(item.value == "value3"){
      item.checked = optionsState.checkbox3;
    }
  });

  this.childModal.nativeElement.present();
}

dismiss() {
  this.childModal.nativeElement.dismiss();
}

child.component.html：

    <div *ngFor="let option of options">
      <input
          type="checkbox"
          [value]="option.value"
          (change)="onOptionsSelectChanged($event)"
          [checked]="option.checked" />
    </div>

Answer 1

尝试在此处传递数组对象 option 而不是 $event。看看这个网址..

https://stackblitz.com/edit/angular-ivy-wifdeg