Angular Анимация на элементе <tr> - PullRequest
Новая
       30

Angular Анимация на элементе <tr>

0 голосов
/ 28 января 2020

У меня есть таблица, показывающая список предметов. Этот список элементов обновляется с помощью опроса путем выполнения запроса http get к серверу и обработки ответа, только если в ответе было изменение.

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

У меня есть main.component.ts который содержит как таблицу, так и другой компонент, это наблюдаемые, передаваемые их дочерним элементам. Я передаю как событие $ stream с массивом отображаемых событий, так и newSeenPlatformIds $, который выдает максимальное значение id для массива событий, извлекаемых только при наличии изменений. Я использую его для запуска анимации, если это число изменяется, появляется новая строка. 

ngOnInit() {
    // events that get rendered in the table
    this.events$ = timer(0, 5000).pipe(
      switchMap(() => this.eventsService.fetchLastEvents()),
      distinctUntilChanged(
        (curr, prev) =>
          Math.max(...curr.map(currItem => currItem.id)) === Math.max(...prev.map(prevItem => prevItem.id))
      )
    );
    // everytime a new id is emitted, I want the row containing the event with event.id to animate
    this.newSeenPlatformIds$ = this.events$.pipe(
      map(events => Math.max(...events.map(event => event.id))),
      distinctUntilChanged()
    );
  }

Теперь компонент таблицы, в котором определена анимация: 

import { Component, OnInit, Input } from '@angular/core';
import { Observable } from 'rxjs/internal/Observable';
import { Event } from 'src/app/shared/interfaces/event';
import { trigger, style, transition, animate } from '@angular/animations';
import { tap } from 'rxjs/operators';

@Component({
  selector: 'app-last-events-grid',
  templateUrl: './last-events-grid.component.html',
  styleUrls: ['./last-events-grid.component.scss'],
  animations: [
    trigger('newRowAnimation', [
      transition('* <=> *', [style({ opacity: 0 }), animate('1000ms', style({ opacity: 1 }))])
    ])
  ]
})
export class LastEventsGridComponent implements OnInit {
  @Input() events$: Observable<Event[]>;
  @Input() newSeenPlatformIds$: Observable<number>;
  newSeenPlatformId: number;
  triggerAnimation = false;

  constructor() {}

  ngOnInit() {
    this.newSeenPlatformIds$.pipe(tap(id => console.log(id))).subscribe(id => {
      this.newSeenPlatformId = id;
      this.triggerAnimation = true;
    });
  }
}

Наконец, шаблон: 

<div class="flex justify-center">
  <table class="w-full mx-10">
    <thead class="text-gray-500">
      <tr>
        <th class="cell-main"></th>
        <th class="cell-main">DESCRIPTION</th>
        <th class="cell-main">TIME</th>
        <th class="cell-main">READER</th>
        <th class="cell-main">STATE</th>
        <th class="cell-main">NEXT CHECK</th>
        <th class="cell-main">READINGS LEFT</th>
      </tr>
    </thead>
    <tbody>
      <tr
        [@newRowAnimation]="triggerAnimation && event.id === newSeenPlatformId"
        [ngClass]="{ 'row-nok': event.estado === false }"
        class="rounded overflow-hidden shadow-lg text-xl text-gray-500"
        app-event-item
        *ngFor="let event of events$ | async"
        [event]="event"
      ></tr>
    </tbody>
  </table>
</div>

1 Ответ

1 голос
/ 28 января 2020

В случае, если у кого-то возникла такая же проблема, я смог найти этот другой вопрос, посмотрев также «trackBy», как предложил @tsiro, я просто последовал и это сработало:

решение

...