Я хочу сделать простой выбор элементов, чтобы люди могли выбирать из моего Array(a) и добавлять в Array(b). Также они могут удалить из Array(b) и выбрать все Array(a) в Array(b), а затем отменить выбор ненужных. Просто:

1.Массив (a) .item.clicked -> Массив (b) .item добавлен

2.Массив (a) .item.clicked второй раз -> Array (b) .item.deleted

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>

Если у вас есть идеи или вы уже делали это раньше, я хотел бы посмотреть, как вы это реализовали. По какой-то причине я сейчас борюсь. Пожалуйста, напишите, если нужна дополнительная информация - предоставлю.

0
Angulandy2 23 Окт 2018 в 11:32

2 ответа

Лучший ответ

Вот очень простая версия: 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 добавляя выбранные элементы в этот индекс, либо добавляя элемент вместо этого, если его еще нет.

2
hlfrmn 23 Окт 2018 в 09:00

На вашем месте я бы использовал набор наблюдаемых, чтобы справиться с этим. 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);
  }
}
1
user4676340user4676340 23 Окт 2018 в 09:09
52944572