web-dev-qa-db-ja.com

Ionic2トグルコンポーネント変更イベントが発生しない

私のアプリは正常にレンダリングされていますが、なぜchangeイベント関数updateItem(item)が起動しないのですか？

テンプレート：

  <ion-list>
    <ion-item-sliding *ngFor="#item of items">
      <ion-item>
        <ion-label>{{item.title}}</ion-label>
        <ion-toggle [(ngModel)]="item.completed" (change)="updateItem(item)"></ion-toggle>
      </ion-item>
      <ion-item-options>
        <button primary (click)="editItem(item)">
          <ion-icon name="edit"></ion-icon>Edit
        </button>
      <button secondary (click)="deleteItem(item)">
        <ion-icon name="delete"></ion-icon>Delete
      </button>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>

クラス：

export class Todos {
...
  updateItem(item) {
    alert(1)
    this._todosService.update(item).subscribe(
      response => { this.getItems(); }
    );
  }
... 
}
eventstypescriptangularionic2
17
Dave

Ionic documentation に従って、あなたはそれを行うことができます：

<ion-toggle [(ngModel)]="item.completed" (ionChange)="updateItem(item)" checked="false"></ion-toggle>

これがお役に立てば幸いです！

43
Fryck

更新

_<ion-toggle [(ngModel)]="itemCompleted"></ion-toggle>
_
_export class Todos {
  get itemCompleted() {
    return item.completed;
  }
  set itemCompleted(value) {
    item.completed = value;
    updateItem(item);
  }

  ...
  updateItem(item) {
    alert(1)
    this._todosService.update(item).subscribe(
      response => { this.getItems(); }
    );
  }
  ... 
}
_

オリジナル

[(ngModel)]="..."が機能する場合、これ

_(ngModelChange)="updateItem(item)"
_

同様に動作し、おそらくあなたが達成しようとすることを行う必要があります。

4
Günter Zöchbauer

初期値がtrueの場合、ionChangeは毎回トリガーされるため有用ではありません。

<ion-toggle [(ngModel)]="item.completed" (ngModelChange)="updateItem(item)"></ion-toggle>

これがお役に立てば幸いです！

2
Jaydeep Kataria