1

Ангуляр 7. Приложение "Список покупок". Столбец с дивами с товаром и цветовые кнопки для сортировки. Например "Картошка" и "Лук" можно покрасить одинаковым цветом, что расположит их при пересортировке рядом. Еще есть Крестик - признак "куплено". Элементы переставляются

css / diplay:flex / order:[вычисляемое].

Элементы сгенерированы с помощью *ngFor

Order меняется с помощью [ngStyle]

Все работает. Но, когда нажимаешь на сортировку, пользователю не очевидно, куда элемент мгновенно пропал. Я Решил перед сортировкой просчитать направление и сыграть небольшое движение {margin-top: -70px; } на 50ms.

А подстановку настоящего положения отложить на 100ms. Событие }клик на дочернем элементе shop.component.html

передает на shop.component.ts

в функцию d(elem: any, sort: number)

(себя-элемент, и новый номер сортировки)

После вычисления направления элементу сообщается новый стиль {margin-top: -70px;}

Потом генерируется событие: "Кнопку сорт нажали",

для передачи родительскому компоненту app.component.ts,

а оттуда в

data.service.ts

и сообщает объекту модели новые значения {order:[]}

Событие долетает быстрее, чем 50ms, что приводит к мгновенному перестроению, а потом на новом месте элемент исполняет маленький танец. Это не то, что я хотел. Если обернуть запуск события в таймер ДАЖЕ НУЛЕВОЙ:

setTimeout(function() {
              this.ColorBtnClicked.emit(elem);
       }, 0 );

То событие вообще не испускается. Теперь, элемент ведет себя так как надо: он имитирует начало полета в нужную сторону и перестраивается, но не окрашивается в нужный цвет и не получает префикс типа 1)2)... -8) Номер сортировки (а это задача data.service.ts). А если убрать тайм аут, то событие выполняет свою работу (красит див и ставит префикс), но мгновенно, а потом элемент танцует на новом месте, где его и не видно за пределами экрана.

Попробую лаконично выложить код:

shop.component.html

 <div id="shopping" style="display: block;">
      <ul id="listingUL">
        <li *ngIf="!isFirst" class="item" [ngClass] = "{itemCrossedOut: item.done}" [ngStyle] ="{backgroundColor: 'var(--color' + ('' + item.order) + ')'}">

          <div class="main">
            <span class="itm">{{item.content}}</span>
            <button (click)="d(item, 9)" class="ok">X</button>
          </div>
          <div  class="orderDiv">
            <button (click)="d(item, 1)" class="orderBtn d1">1</button>
            <button (click)="d(item, 2)" class="orderBtn d2">2</button>
            <button (click)="d(item, 3)" class="orderBtn d3">3</button>
            <button (click)="d(item, 4)" class="orderBtn d4">4</button>
            <button (click)="d(item, 5)" class="orderBtn d5">5</button>
            <button (click)="d(item, 6)" class="orderBtn d6">6</button>
            <button (click)="d(item, 7)" class="orderBtn d7">7</button>
            <button (click)="d(item, 8)" class="orderBtn d8">8</button>
          </div>
        </li>
        </div>

      </ul>
    </div>

shop.component.ts

import {
  Component,
  Input,
  EventEmitter,
  Output,
  OnInit
} from '@angular/core';
import {Item} from '../item';

@Component({
  selector: 'app-shop-comp',
  templateUrl: './shop.component.html',
  styleUrls: ['./shop.component.css']
  })

export class ShopComponent{
  @Input() shopData: Item[];

  @Output() ColorBtnClicked = new EventEmitter<any>();


    d(elem: any, sort: number) {
      let newDone;
      let dir: number; // направление

      // здесь вычисляем новое направление

      if (dir > 0) {elem.direction = '70px 0px -70px 0px';}
      else  if (dir < 0) {elem.direction = '-70px 0px 70px 0px';}


      // setTimeout(function() {
        elem.done = newDone;
        if (sort !== 9) {elem.order = sort; }
        this.ColorBtnClicked.emit(elem);
      // }, 100 );


      setTimeout(function() {
        elem.direction = '0px 0px 0px 0px';
      }, 200 );
  }
}

app.component.ts

    import {Component, OnInit} from '@angular/core';
import {DataService} from './data.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  providers: [DataService]
})
export class AppComponent implements OnInit {

  constructor(private dataService: DataService) {}

  title = 'Shop-Reminder-App';
  activeScreen = 'inp';
  // activeAdv = 'slp';
  listing = '';
  shopData = [];

  onClickScreenBtn(screen) {
    this.activeScreen = screen;
  }

  onlistingAreaChanged(listing) { // слушаем событие изменился listing и отправляем текст в DataService
    this.shopData = this.dataService.rebuildData(listing);
  }

  ColorBtnClicked() { // слушаем нажатие на цвето-сортировку
        this.listing = this.dataService.rebuildText();
}

  setOldText(obj: any) {
    let text = '';
    for (let i = 0; i < obj.length; i++) {
         text = text + obj[i].content + ',';
    }
    this.shopData = this.dataService.rebuildData(text);
  }



  ngOnInit() {
    this.setOldText(this.shopData);
  }
}

data.service.ts

import {Item} from './item';

export class DataService {
  private data: Item[] = [];

  // getData(): Item[] {
  //   return this.data;
  // }


  rebuildData(text) {

        this.data = [];
       // присваиваем прорядок согласно номеру 1)-8), если он есть

    return this.data;
  }

  rebuildText() { 
                 //Заглавие, номера 1)2)3)4)5)6)7)8) done(х)
    let text = '';
      // после нажатия на сортировку модифицируем список:  
      //Заглавие, номера 1)2)3)4)5)6)7)8) done(х)    
    return text;
  }
}

item.ts

export class Item {
  constructor(
    public order: number,
    public content: string,
    public done: boolean,
    public direction: string,
  ) {}
}

1 ответ 1

1
setTimeout((function() {
  this.ColorBtnClicked.emit(elem);
}).bind(this), 0);

или

setTimeout(() => this.ColorBtnClicked.emit(elem), 0);

или

setTimeout(function(context) {
  context.ColorBtnClicked.emit(elem);
}, 0, this);
3
  • или new EventEmitter(true)
    – arturovt
    30 дек 2018 в 6:42
  • Большое спасибо. Первый же вариант решил задачу. setTimeout((function() { this.ColorBtnClicked.emit(elem); }).bind(this), 0); Теперь мне надо почитать об этом теорию, потому, что я их не различаю. Вы могли бы дать ссылки на где почитать. Спасибо еще раз.
    – A. Victor
    30 дек 2018 в 10:54
  • @A.Victor ru.stackoverflow.com/questions/535030/…
    – user176262
    30 дек 2018 в 13:56

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.