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

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代码的复选框选择中选择的术语。当我点击删除字段值关闭图标。值从选定的项数组中删除。但是，复选框并没有被取消选中。

<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