如何保持复选框是否已使用Angular2选中

Question

I have a input checkbox field, when i check the box the functions work fine but after refresh the tick mark disappears in the box. So can i get the tick mark be true if it has been already selected and the data saved in other page.

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);
        });
}

in the first page what all i have checked had been and saved in another page, so the items which have been stored already in another page contents needs to be marked checked in the first page

Answer 1

You will have to add checked attribute.

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

Answer 2

From your question you are sending pin_id as data to api so, you need to compare pin_id instead of _id

Here you are sending pin_id var data = { "user_id":user_id, "pin_id":pin._id }

So you should use,

 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;
 }