我想取消选中使用拼接删除文件的复选框

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

我想取消选中使用拼接删除文件的复选框

i want to uncheck a checkbox on remove filed using splice

checkbox

unchecked

checked

angular