从列表中删除选定的选中项目 - Angular 2+/ Ionic 2答案

【问题标题】：Remove selected checked items from list - Angular 2+/ Ionic 2从列表中删除选定的选中项目 - Angular 2+/ Ionic 2
【发布时间】：2017-07-17 01:33:52
【问题描述】：

我有一个复选框列表。当用户选择保存时，选中的项目将被删除并放置在我也包含的已保存选项卡中。我已经设法降低了删除项目的功能，只是不确定如何检查它是否已被检查然后删除该项目。谢谢

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)

}

}

【问题讨论】：

标签： javascript angular typescript ionic2

【解决方案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>

在 selectall 中使用 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;}

【讨论】：