在完成视频角度4时显示div

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期

如果我在其他部分使用ng-container而不是ng-template，并检查不同的值，那么代码可以工作，但是新的div不会显示。它只有当我做了一个动作，如鼠标上方，或一个不同的div显示。

Answer 1

正如巴塔修斯所指出的。我需要更改组件声明

changeDetection: ChangeDetectionStrategy.OnPush添加

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

并调用detectChanges()方法。

我会贴出完整的代码。

谢谢