2016-02-25 57 views
15

我的应用渲染正常,但为什么change事件函数updateItem(item)未被触发?Ionic2切换组件更改事件未触发

模板:

<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(); } 
    ); 
    } 
... 
} 
+1

看起来像https://github.com/driftyco/ionic/issues/5034我还没有找到''来触发'change'事件。你可以链接到文档它触发了什么事件?我自己并不使用Ionic。 –

+0

http://ionicframework.com/docs/v2/api/components/toggle/Toggle/ – Dave

+0

你尝试过'ngModelChange'事件吗? –

回答

32

根据该文档,你可以这样做:

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

希望能帮助你!

+0

嘿,谢谢。当我问这个问题时,这个问题没有解决。但现在这是正确的。 – Dave

+1

ionChange应该在文档中提到\t ionicframework.com/docs/v2/api/components/toggle/Toggle – Luckylooke

4

更新

<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)" 

应该工作以及与可能做你试图完成什么。

+1

在进一步测试中,这不是一个令人满意的答案,因为它在首次呈现切换时调用change事件。这不是理想的结果。看起来(更改)事件不是触发实际上是Ionic 2的最新测试版中的一个错误。 – Dave

1

如果初始值为true,则ionChange无用,因为它每次都会触发。

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

希望这有帮助!