]上的角动画> 元素我有一张显示项目清单的表格。通过对服务器执行http get请求并使用轮询来更新此项目列表，并且仅在响应发生更改时才呈现响应。我想要的是将动画附加到表的行上，如果该行是新行，则执行动画。现在，每当响应是新的并且组件被重新渲染时，都会触发动画，但是它是针对表的所有行而不是针对新的触发。我有main.component.ts，其中同时包含表和其他组件，这些是向下传递给其子级的可观察对象。我同时传递了event $流和要显示的事件数组，以及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> 我有一张显示项目清单的表格。通过对服务器执行http get请求并使用轮询来更新此项目列表，并且仅当发生更改时才呈现响应... - angular - SO中文参考