单击后将选中的项目移动到同一页面中的其他选项卡

Posted 2023-03-13

【中文标题】单击后将选中的项目移动到同一页面中的其他选项卡

【英文标题】：Move checked item to other tab in same page after click

【发布时间】：2017-12-25 13:01:29

【问题描述】：

我有一个消息列表。检查并保存消息后，该消息应移动到另一个选项卡 - 我们称之为已保存。我有这个功能；但是，每次保存后，最后一条消息都会覆盖上一条消息。我需要在每次保存后以某种方式附加消息而不操作 DOM。我正在使用 Ionic 3。消息是已保存的消息。 rmessages 是用户收到的消息。

打字稿

import  Component  from '@angular/core';
import  NavController from 'ionic-angular';

@Component(
  selector: 'page-messages',
  templateUrl: 'messages.html'
)
export class MessagesPage 
selectedAll: boolean = false;
messages: string = 'messages';
singleChecked: boolean = false;
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 
  ];
 amessages: any[] = []; 

  constructor(public navCtrl: NavController)  



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


save()

this.amessages = this.rmessages.filter(function(x)  return x.selected)

this.rmessages.filter(function (x) 
      return x.selected;).map(function(y) 
        return y.text;);
  this.rmessages =  this.rmessages.filter(function (x)  return !x.selected;)

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)]="rmessage.selected" ></ion-checkbox>
    </ion-item>
        <button ion-button full (click)="save()"  style="font-size:1.8rem">save</button>
    </ion-list>

  <ion-list radio-group *ngSwitchCase="'sent'">
    <ion-list-header>Saved Messages</ion-list-header>
        <ion-item *ngFor="let amessage of amessages; index as i" >
        <ion-label>amessage.text</ion-label>
        </ion-item>
  </ion-list>
</div>
</ion-content>

【问题讨论】：

您还想从rmessages 中删除选中的项目吗？

我有删除它们的功能

【参考方案1】：

只需将 save() 函数更改为：

save()

   this.amessages.concat( this.rmessages.filter(function(x)  return x.selected));
   this.rmessages =  this.rmessages.filter(function (x)  return !x.selected;)

【讨论】：

哇，我觉得自己很笨。没有想到 concat()。谢谢！！