Question

我想简单地选择项目-人们可以从我的Array(a)中进行选择并添加到Array(b)中。他们也可以从Array(b)中删除，并且可以选择所有Array(a)至Array(b)-然后取消选择不需要的内容。简单地：

1.Array（a）.item.clicked->添加了Array（b）.item

第二次单击Array（a）.item .--->删除Array（b）.item。

3.Array（a）.selectAll = Array（b）{if（selected.all）{Array（a）.item.clicked-> Array（b）.item.removed}}

我的开始（带有解释的示例）：

oneFunctionForAll(){
    if(clicked-first-tiem) {
      addCompare(item)
      }
    }
    if(clicked-second-time){
  removeCompore(item, i)
    }

    if(selected-all-and-clicked) {
      removeCompore(item, i)
    }

if(selected-all-and-clicked 2nd-time) {
  addCompare(item)
}

  }
  addCompare(item) {
    this.compare.push(item)
    console.log('Prideda',this.compare)
  }

  removeCompore(item, i) {
    const index = this.compare.indexOf(i)
    if (index !== -1) {
      this.compare.splice(index, 1);
    }
    console.log('triname',this.compare)

  }

HTML：

    <ion-card *ngFor="let item of jsonObj | slice:0:4; let i = index" 
class="relative" (click)="oneFunctionForAll(item,i);"> </ion-card>

如果您有任何想法或以前曾做过，我想看看您是如何实现的。由于某种原因，我现在正在苦苦挣扎。如果需要更多信息，请写信-我会提供。

Answer 1

这是一个非常简单的版本：StackBlitz

我正在使用Set“切换”项目，并且我有一个单独的功能可以从原始数组中选择所有项目。

sourceArray = [
  'Alice',
  'Bob',
  'Charlie',
];

selected = new Set();

toggleItem(item: string) {
  if (this.selected.has(item)) {
    this.selected.delete(item);
  } else {
    this.selected.add(item);
  }
}

selectAllItems() {
  this.selected = new Set(this.sourceArray);
}

如果需要，您还可以重写toggleItem函数以将数组用作目标。可能是通过尝试找到项目索引，然后splice在该索引上选择所选项目，或者如果尚不存在，则添加该项目。

Answer 2

如果我是你，我将使用一组可观察对象来处理。无论如何，Angular随RxJs一起提供，因此您也可以利用它。

这是关于stackblitz的一个示例：

https://stackblitz.com/edit/angular-tpuigb?file=src%2Fapp%2Fapp.component.css

只需单击项目即可将它们从一列移动到另一列。

如您所见，代码非常简单且简短，不需要太多工作。

<h1>Click on an item to select it</h1>

<div class="container">
  <div class="values">
    <div class="value" *ngFor="let item of available$ | async" (click)="select(item)">{{ item.value }}</div>
  </div>
  <div class="selected">
    <div class="value" *ngFor="let item of selected$ | async" (click)="unselect(item)">{{ item.value }}</div>
  </div>
</div>

import { Component } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  values = [
    { value: 'Lorem', selected: false, },
    { value: 'Ipsum', selected: false, },
    { value: 'Dolor', selected: false, },
    { value: 'Sit', selected: false, },
    { value: 'Amet', selected: false, },
  ]

  values$ = new BehaviorSubject(this.values);

  available$ = this.values$.pipe(
    map(items => items.filter(item => !item.selected))
  );
  selected$ = this.values$.pipe(
    map(items => items.filter(item => item.selected))
  );

  select(item) {
    item.selected = true;
    this.values$.next(this.values);
  }

  unselect(item) {
    item.selected = false;
    this.values$.next(this.values);
  }
}

Angular 2添加/删除/全选-数组中的项目

2 个答案: