我想取消选中使用拼接删除提交的复选框

Question

这是我的 html 文件： 我从 api 得到的条款。 选中复选框时，它将在 selectedTermsArray 中显示所选值。

 <span class="suggestermsSpan" >Suggested terms </span> <br>
    <div *ngFor="let list of TermsArray" >      
       <input name="checkboxName" class="checkmark" id="checkbox1" type="checkbox" value="{{list.Name}}" (change)="$event.target.checked? (isfrmChecked = true) : isfrmChecked = false; onCheckboxSelected($event,isfrmChecked);">
         {{list.Name}}
    </div>
</div>

这也是我的html文件：

在上述 html 代码的复选框选择中选择的术语。 当我单击删除字段值关闭图标时。从 selectedtermsArray 中删除值。 但是，复选框并没有被取消选中。

<div>
   <div *ngFor="let selectedValue of selectedTermsArray ; let i = index" ">     
      
     <span>{{selectedValue}}</span>

                                       
   </div>
</div>

这是我的 ts 文件..

 selectedTermsArray: string[] = [];
 isfrmChecked:any;

 onCheckboxSelected(event: any, isChecked: boolean)
 {
   if (isChecked) {
     this.selectedTermsArray.push(event.target.value);
   }
   else {
     let index = this.selectedTermsArray.indexOf(event.target.value);
     this.selectedTermsArray.splice(index, 1);
   }
 }

 removeField(index) {
         this.selectedTermsArray.splice(index, 1);
 }

Answer 1

您需要在从selectedTermsArray 数组中删除项目时处理复选框状态。

更新您的输入复选框，如下所示。添加了ngModel 来维护复选框的状态并将onChange 事件替换为ngModelChange。

<div *ngFor="let list of TermsArray">
    <input
      name="checkboxName"
      class="checkmark"
      id="checkbox1"
      type="checkbox"
      value="{{list.Name}}"
      [(ngModel)]="list.isChecked"
      (ngModelChange)="onModelChange($event,list.Name)"
    />
    {{list.Name}}
</div>

您的onModelChange 函数如下所示。

onModelChange(isChecked, value) {
    if (isChecked) {
      this.selectedTermsArray.push(value);
    } else {
      let index = this.selectedTermsArray.indexOf(value);
      this.selectedTermsArray.splice(index, 1);
    }
}

然后在从下面删除项目时，像这样更新主数组复选框状态。

removeField(index, value) {
    this.selectedTermsArray.splice(index, 1);
    this.TermsArray.map((x) => {
      if (x.Name === value) {
        x.isChecked = false;
      }
    });
}

工作代码和框：-

https://codesandbox.io/s/checkbox-relationship-lc7q2?file=/src/app/app.component.ts