Angular Animation - Попытка добавить pause () при наведении мыши и play () при наведении мыши на анимированный наблюдаемый массив

Question

Невозможно получить отдельный заголовок из списка заголовков, возвращаемых * ngFor для анимации с помощью Angular Animation Player.

Я делаю скроллер новостей, который получает 20 заголовков новостей из прямой RSS-ленты, используяrxjs и наблюдаемые операторы.Мне нужно использовать Angular AnimationPlayer, потому что мне нужно включить mouseover pause () и mouseout play ().

Вот мой шаблон компонента

<div #el>
   <ng-container  *ngIf="newsItems$ | async as newsItems$FromContainer">
    <div  id="news" class='mat-elevation-z10'>
      <div  class="news-title" *ngFor="let v of newsItems$FromContainer">
        <div  class="news-headline" [innerHTML]="v[4]" 
(mouseover)="this.streamPlayer.pause()" 
(mouseout)="this.streamPlayer.play()"></div>
      </div>
    </div>
   </ng-container>
</div>

Вот мой компонент:

    @Component({
      selector: 'app-news-card-list',
      templateUrl: './news-card-list.component.html',
      styleUrls: ['./news-card-list.component.scss']
    })

    export class NewsCardListComponent implements AfterViewInit {

      constructor(private api: ApiService, private _builder: AnimationBuilder) { }

      streamPlayer: AnimationPlayer;
      @ViewChild('el', {static: false}) el: ElementRef;
      title = 'news-stream';
      newsItems$: Observable<Item[]>;
      http$: Observable<Item[]>;
      private factory = this._builder.build([
        useAnimation(streamAnimation, {})
      ]);

      ngAfterViewInit() {
        this.http$ = this.api.rssSource$();
        this.newsItems$ = this.http$.pipe(
          map(res => Object.values(res['items'])
            .map(item => {
                const v = item['content'].toString()
                // tslint:disable-next-line:align
                  .match(/(?:https.*?)(?=\"|')|(?:)(<\s*[p]*>(.*?)<\/p>)/g);
                return v;
              }
            )));
        this.streamPlayer = this.factory.create(this.el.nativeElement, {});
        this.streamPlayer.play();
      }
    }

В итоге я использовал многократно используемую анимацию, потому что когда я использовал обычную запись @startEnd trigger (), она выдала мне ошибку с просьбой установить BrowserAnimationModule, который правильно установлен в ngModule.Функция useAnimation () теперь эффективно действует как триггер и идентифицируется так же, как и в фабрике AnimationBuilder.

Вот анимация в отдельном файле ts:

    import {animation, animateChild, transition, animate, style, query, stagger, sequence
    } from '@angular/animations';

    export const streamAnimation = animation([
    transition(':enter', [
      query('.news-headline',  [
        stagger(5000,
          sequence([
            animate(1000, style({top: '0', opacity: '0', transform: 'translateX(0px)'})),
            animate('3s', style({opacity: '1', transform: 'translateX(1200px)'})),
          ])
        ),  animateChild()
      ], { optional: true })
    ])
    ]);

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

Я ожидаю, что когда this.streamPlayer.play () будет запущен в ngAfterViewInit (), он запустит плеер, а элементы из v [4] будутпрокрутка по экрану.

В настоящее время я получаю то, что ожидаю, в качестве отправной точки за вычетом прокрутки по экрану.Его 20 заголовков свалились друг на друга, ожидая своей очереди на непрозрачность: 0;изменено на непрозрачность: 1;и их transitionX (0) изменился на transitionX (1200px).Они все еще ждут.Что-то, на что стоит обратить внимание - в августе в нем говорится, что состояние игрока «началось»

На данный момент у меня появляются сообщения об ошибках ZERO.Пожалуйста, помоги, если можешь.Спасибо