javascript - 使用 Angular 从数组中删除取消选中的复选框值

Question

这很简单，但我仍然无法让它工作。

我选中了默认值，复选框。因此，在编辑时，当然选择默认值，但后来我想删除默认值并选择另一个值。这是

array1=[] //empty

选中复选框后，它将插入到该数组中

array1=["sun"]

如果我选择 3 个值 (array1["sun","stars","moon"]) 但我取消选择第一个选择(默认选择)，它将仍然在数组中。 (array1["sun","stars","moon"]) 但我预期的结果是这样的:

array1["stars","moon"]

不再有首选。那么如何使用 Angular/Javascript 从数组中删除取消选择的值呢？

我尝试过使用splice、remove和set

Answer 1

在项目中开发和使用相同的东西:

模板面:

<label *ngFor="let hobby of hobbies" #checkbox class="mdl-checkbox mdl-js-checkbox">
    <input type="checkbox" name="hobbies" [value]="hobby" 
    (change)="populateMyHobbies(hobby,$event.target.checked)" class="mdl-checkbox__input">
    <span class="mdl-checkbox__label">{{hobby}}</span>
</label>

组件端:

selectedHobbies = [];

populateMyHobbies(value , status:boolean)
{
    if(this.selectedHobbies.indexOf(value) === -1 && status)
    {
        this.selectedHobbies.push(value);
    }
    else if(!status)
    {
        let index = this.selectedHobbies.indexOf(value);
        this.selectedHobbies.splice(index, 1);
    }
}

这里selectedHobbies会给你你想要的。

只需根据您的应用更改名称。