错误类型错误：无法读取未定义的属性“nativeElement”> at xxxxxxx.push../src/app/xxxx-area/xxxx/xxxx.component.ts.xxxx.toggleVideo

如何解决错误类型错误：无法读取未定义的属性“nativeElement”> at xxxxxxx.push../src/app/xxxx-area/xxxx/xxxx.component.ts.xxxx.toggleVideo

我想在进入 next 滑块或 prev 滑块时停止视频。我正在使用 mat-carousel-slide。代码如下

 <mat-carousel-slide #matCarouselSlide *ngFor="let slide of video; let i = index"
              overlayColor="#00000040" [hideOverlay]="false">

              <video *ngIf="slide?.Video" controls class="videostyle" id="videoPlayer">
                <source src="{{slide?.Video}}" type="video/mp4">
                browser not supported
              </video>
            </mat-carousel-slide>
            <br>
          </mat-carousel>
          <button (click)="toggleVideo()">Play/Pause</button>

.ts 代码

  @ViewChild("videoPlayer") videoplayer: ElementRef;
  toggleVideo(event: any) {
    this.videoplayer.nativeElement.pause();
  }

请问你有什么想法可以和我分享吗？如何停止视频？此代码显示错误：

错误类型错误：无法读取未定义的属性“nativeElement” 在 xxxxxxx.push../src/app/xxxx-area/xxxx/xxxx.component.ts.xxxx.toggleVideo (xxxx.component.ts:87)