Change property of an item in a list on click

Hi,

I’d like to change the property “points” when I click on a button with the function “Sometimes()”. Here’s the home.ts file

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class Home {

  items = [];
  btnName: any = 'Edit';
  flag: any = false;

  constructor(public navCtrl: NavController) {

    this.items = [
        {
        id: 'action1',
        points: 0,
        label:'never : details'
        },
        {
        id: 'action2',
        points: 0,
        label:'never : details'
        },
    ];
    }

    sometimes(item){
      item.points = 1;
    }

     reorderItems(indexes) {
       let element = this.items[indexes.from];
       this.items.splice(indexes.from, 1);
       this.items.splice(indexes.to, 0, element);
     }

     actionBtn(){
      if(this.btnName == 'Edit')
      {
        this.btnName = 'Done';
        this.flag    = true;
      }
      else
      {
        this.btnName = 'Edit';
        this.flag    = false;
      }
     };
}

And here’s the home.html file :

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
    <ion-buttons end>
      <button ion-button small clear (click)="actionBtn();">
        {{btnName}}
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <ion-card>
  <ion-item>
    <ion-avatar item-left>
      <ion-icon class="custom-icon" name="home"></ion-icon>
    </ion-avatar>
    <h2></h2>
    <p></p>
  </ion-item>
</ion-card>
<ion-list>
  <ion-item-group reorder="{{flag}}" (ionItemReorder)="reorderItems($event)">
    <ion-item-sliding *ngFor="let item of items">
     <ion-item (click)="goToPage()">
       {{item.id}}
       <p>{{item.label}}</p>
       <p>{{item.points}}</p>
     </ion-item>
     <ion-item-options side="right">
       <button ion-button (click)="always()">
         Always
       </button>
       <button ion-button (click)="often()">
         Often
       </button>
       <button ion-button (click)="sometimes()">
         Sometimes
       </button>
     </ion-item-options>
   </ion-item-sliding>
 </ion-item-group>

</ion-list>

</ion-content>

I try with this function in home.ts, it used to word in AngularJS but it doesn’t work here :

sometimes(item) {
          item.points: 20; 
         }

Your function is expecting an argument, but you don’t pass anything in your HTML.

i.e. change

       <button ion-button (click)="sometimes()">
         Sometimes
       </button>

to:

       <button ion-button (click)="sometimes(item)">
         Sometimes
       </button>
1 Like