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

Question

我有一个子组件，该子组件由3个复选框（使用ngFor动态生成）和一个Apply和Cancel按钮组成。

孩子的选择器标签已添加到父母的模板中。父组件使用@ViewChild访问此子组件，并调用子组件公开的present（）方法，并将对象作为对象，如下所示，该对象由复选框的选中状态组成。]

每次显示模态时，都会调用present（）方法。 UI /复选框第一次作为父级发送的值进行更新/检查。但是，在随后的对present（）的调用中，即使options.checked值正按预期在ts文件中更新，这也没有反映在UI中。每次显示模式时，我都希望基于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>
    

我有一个子组件，该子组件由3个复选框（使用ngFor动态生成）和一个Apply和Cancel按钮组成。孩子的选择器标签将添加到父母的模板中。父级...

Answer 1

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