從列表中刪除選中的選中項 - Angular 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模型需要更智能的

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

然後你ngFor

內

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

在通過使用的foreach或東西rmessages的全選使用循環將Selected設置爲true或false

在保存

使用rmessages.filter並獲得選擇的項目，並將其保存在保存選項卡

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

然後設置rmessages以非選擇項目的rmessages.filter

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