Question

我有一个输入复选框字段，当我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);
        });
}

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

Answer 1

您必须添加checked属性。

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

Answer 2

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

您要发送pin_id var data = { “USER_ID”：USER_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;
 }

如果已经使用Angular2检查了复选框，如何保持复选框

2 个答案: