如果已经使用 Angular2 选中了复选框，如何保持复选框处于选中状态

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

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

您在这里发送pin_id变量数据 = { "user_id"：user_id， "pin_id":p in._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;
 }

Answer 2

您必须添加checked属性。

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