刷新后保持复选框处于选中状态答案

【问题标题】：keep the checkbox checked after refresh刷新后保持复选框处于选中状态
【发布时间】：2021-04-30 04:17:39
【问题描述】：

我想保留我在刷新页面或移动到另一个页面时选中的复选框列表。

这是我的 component.ts ：

 isValidForm = false;
 public selectedActivityType: any[] = [];
 public assignmentFor: any = [{name :"Cause", id : "t1"}, {name: "Resulted damage", id:"t2"},{ name: "Emergency", id:"t3"}]
 constructor(){}
 ngOnInit(){}
selectActivityFor(event:any, option:any)
 {
  if ( event.target.checked )
   {
     this.selectedActivityType.push(option.id);
   }
 else{
    this.selectedActivityType.splice(this.selectedActivityType.indexOf(option.id),1);
  }    
 if(this.selectedActivityType.length >0 && 
(this.selectedActivityType.indexOf(this.assignmentFor[1].id) !== -1 || 
this.selectedActivityType.indexOf(this.assignmentFor[0].id) !== -1 ) )
 {
  this.isValidForm = true
}
else 
this.isValidForm = false;
 }

这是我的 component.html ：

  <div *ngIf="assignmentFor.length !==0">
          <div class="container-fluid items-container" style="margin-top: 10px">
            <h5 class="mt-3" style="color : rgb(136,136,139); font-weight: bold">
              assignmentFor</h5>
            <div class="row">
              <div *ngFor="let option of assignmentFor; let i=index" class="animated cedfadeInUpX">
                <input type="checkbox" id="activityFor" (change)="selectActivityFor($event, option)" 
                 kendoCheckBox />
                <label class="k-checkbox-label"
                  style="padding-top:10px;margin-left:5px; padding-left:0;font-size: 14px; padding-right: 60px;">{{option.name}}</label>
              </div>
            </div>
          </div>
        </div>

【问题讨论】：

标签： angular checkbox

【解决方案1】：

希望 this thread 对角度复选框有所帮助

checkedBoxes = {};
ngOnInit(){
this.assignMentFor.forEach((assignment) => {
   this.checkboxes[assignment.id] = true     //to set checkbox to checked
  }
 }
}

在 HTML 中，你可以这样：

<input type="checkbox" id="activityFor" [checked]="this.checkboxes[option.id]" (change)="selectActivityFor($event, option)" 
             kendoCheckBox />

【讨论】：