如果已使用 Angular2 选中复选框，如何保持选中状态答案

【问题标题】：how to keep the checkbox checked if it has been already checked using Angular2如果已使用 Angular2 选中复选框，如何保持选中状态
【发布时间】：2018-04-11 19:10:00
【问题描述】：

我有一个输入复选框字段，当我 check 框时，功能工作正常，但刷新后勾选标记消失在框中。那么如果它已经被选中并且数据保存在其他页面中，我可以得到刻度标记true。

HTML：

<td><input type="checkbox" [(ngModel)]="pin.checked" (change)="fav(pin)" style="margin-top: 10px;"></td>

TS：

loadAllPins() {
  var favouratePins = this.storage.favouratePins; 
  console.log(favouratePins);
  this.ApiService
      .getAllPins(this.guide_id)
      .subscribe(
        pins  => {
          if(favouratePins && favouratePins.length > 0) {
            pins.data.map(function(pin) {
              favouratePins.map(function(item) {
                if(pin._id == item._id) {
                  pin.checked = true;
                }
              })
            })            
          }
          this.pins = pins.data;

        },error => {
          console.log(error);
        });
}

在第一页中我检查的所有内容都保存在另一个页面中，因此已经存储在另一个页面内容中的项目需要在第一页中标记为已检查

【问题讨论】：

标签： javascript angular typescript

【解决方案1】：

根据您的问题，您将pin_id 作为data 发送到api，因此，您需要比较pin_id 而不是_id

你在这里发送pin_id 变量数据 = { “用户 ID”：用户 ID， “pin_id”：pin._id }

所以你应该使用，

 if(favouratePins && favouratePins.length > 0) {
    pins.data.map(function(pin) {
      favouratePins.map(function(item) {
       if(pin._id == item._id) {
            pin.checked = true;
        }
       })
      })            
     }
     this.pins = pins.data;
 }

【讨论】：

【解决方案2】：

您必须添加checked 属性。

<td>
   <input type="checkbox" [checked]="pin.checked" [(ngModel)]="pin.checked" (change)="fav(pin)" style="margin-top: 10px;">
</td>

【讨论】：