リストから選択したチェック項目を削除する - 角度2 +/Ionic 2

Question

私はチェックボックスのリストを持っています。ユーザーが保存を選択すると、チェックされた項目が削除され、保存されたタブに配置されます。私は項目を削除するための機能を停止させていますが、それがチェックされているかどうかをチェックしてからその項目を削除する方法はわかりません。おかげ

HTML

<ion-content class="checks"> 

    <div [ngSwitch]="messages"> 

    <ion-list active *ngSwitchCase="'received'"> 
     <ion-item> 
     <ion-label>Select All</ion-label> 
     <ion-checkbox (click)="checkAll()" [(ngModel)]="selectedAll" ></ion-checkbox> 
     </ion-item> 


    <ion-item *ngFor="let rmessage of rmessages; index as i"> 
     <ion-label>{{rmessage.text}}</ion-label> 
     <ion-checkbox [checked]="selectedAll" [(ngModel)]="singleChecked.checked" ></ion-checkbox> 
    </ion-item> 

     <button ion-button full (click)="save($index)" >Save</button> 
    </ion-list> 
    <ion-list radio-group *ngSwitchCase="'sent'"> 
    <ion-list-header>Saved Messages</ion-list-header> 
     <ion-item> 
     <p>Saved message here</p> 
     </ion-item> 
    </ion-list> 
</div> 
</ion-content> 

活字体

import { Component } from '@angular/core'; 
import { TranslateService } from '@ngx-translate/core'; 

import { NavController, PopoverController, ViewController, ToastController } from 'ionic-angular'; 


@Component({ 
    selector: 'page-messages', 
    templateUrl: 'messages.html' 
}) 
export class MessagesPage { 
selectedAll: boolean = false; 
messages: string = 'messages'; 
findIndex: any; 
singleChecked: boolean = false; 
rmessages: any[] = [ 
    { text: 'This is a test message.' }, 
    { text: 'This is a second test message.' }, 
    { text: 'This is a third test message.' } 
    ] 

    constructor(public navCtrl: NavController, public popoverCtrl: PopoverController, private toastCtrl: ToastController) { 
    this.messages = 'received'; 
    } 

ionViewDidLoad() { 
} 

checkAll(){ 
    console.log(this.messages.length) 
    if(this.selectedAll){ 
    this.selectedAll = true 

    } 
    else { 
    this.selectedAll = false 
    } 

} 

save(index){ 

    this.rmessages.splice(
      this.rmessages.indexOf(index), 1) 

} 

} 

Answer 1

は、必要な変更がいくつかあります： - あなたrMessagesモデルは、あなたのngFor

の内側その後

rmessages: any[] = [ 
    { text: 'This is a test message.' , selected:false}, 
    { text: 'This is a second test message.', selected:false }, 
    { text: 'This is a third test message.', selected:false } ] 

よりインテリジェントにする必要があります

<ion-checkbox [(ngModel)]="rmessage.selected" ></ion-checkbox> 
    </ion-item> 

foreachのか何かを使用してrmessagesを通してのSelectAll利用のループでは

と保存

使用rmessages.filterでは真または偽

に選択し、選択した項目を取得し、保存したタブ

に保存

rmessages.filter(function (x) { return x.selected;}).map(function(y){ return y.text;}); 

は、次いで、非選択項目のrmessages.filterにrmessages設定

rmessages = rmessages.filter(function (x) { return !x.selected;}