Question

我有以下要求。页面加载后，运行视频。视频播放完毕后，请使用角度5显示另一个div。

<div>
    <ng-container *ngIf="isFirstTimeLaunch === 1" else showFe>
        <div class="card">
            <div class="card-body" *ngIf="displayVideoSource != ''">
                <video #vdShowIntroVideo id="vdShowIntroVideo" class="video-js vjs-default-skin vjs-4-3" preload="auto" data-setup='{ "asdf": true  }'>
                </video>
            </div>
        </div>
    </ng-container>

    <ng-template #showFe>
        <div class="exterior-container">

            <div class="exterior-container-bg" [routerLink]="[ '/pair/detail/' + featuredPair.pair_id]" [queryParams]="{ authCtx: authCtx }"
                *ngIf="featuredPair" (mouseenter)="PlayAudio()" (mouseout)="StopAudio()">

                <div class="flex"></div>
             </div>
    </ng-template> 
</div>

TS代码：

runVideo() {

    // let mimeType: string;
    debugger;
    let that: any;

    that = this;
    this.setVideoSource();

    this.videoPlayer.ready(function () {
        const player = this;

        this.play();

        player.on('ended', function () {
            that.isFirstTimeLaunch = 2;
        });

    });
}

问题1

这不起作用。怎么了

问题2

如果我在else部分中使用ng-container而不是ng-template，并检查其他值，则代码可以工作，但不会显示新的div。仅当我执行类似鼠标悬停或显示的其他div之类的操作时才会显示。

Answer 1

正如Batajus所指出的。我需要更改组件声明

changeDetection：ChangeDetectionStrategy.OnPush添加

然后在构造函数中。我使用ChangeRef类。

并调用detectChanges（）方法。

我将发布完整代码。

谢谢

视频角度为4

1 个答案: