vimeo您必须传递有效元素或有效ID。在新玩家Angular 5

Question

所以我的页面上有一个vimeo播放器就像这样......

<div class="main" *ngFor="let item of asset">
  <p>{{item.fields.asset[0].fields.textBlock}}</p>
  <div id="video-panel">
    <div [attr.data-vimeo-id]="item.fields.asset[0].fields.vimeoId" data-vimeo-responsive="1" id="video"></div>
  </div>
</div>

现在item.fields.asset[0].fields.vimeoId作为vimeo Id传入，但每次我尝试运行应用程序时都会收到此错误

但如果我console.log item.fields.asset[0].fields.vimeoId我得到了正确的视频ID，那么从理论上说它应该有用......

app.component.ts

import { Component, OnInit, AfterViewInit } from '@angular/core';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { Entry } from 'contentful';
import { ContentfulService } from '../../../contentful.service';

declare var Player: any;
declare var Vimeo: any;

@Component({
  selector: 'app-asset-page',
  templateUrl: './asset-page.component.html',
  styleUrls: ['./asset-page.component.scss']
})
export class AssetPageComponent implements OnInit, AfterViewInit {
  asset: Entry<any>[];
  id: string;
  videoID: string;

  constructor(
    private contentfulService: ContentfulService,
    private route: ActivatedRoute
  ) { }

   ngOnInit() {
    this.route.paramMap
    .switchMap((params: ParamMap) => this.contentfulService.getAsset(params.get('id')))
    .subscribe((asset) => {
      this.asset = asset;
      console.log(this.asset[0].fields.asset[0].fields.vimeoId);
      const video = new Vimeo.Player('video');
    });
  }

我不确定我做错了什么？任何帮助将不胜感激！？

编辑

我可以通过这样做来实现它。

ngOnInit() {
this.route.paramMap
.switchMap((params: ParamMap) => this.contentfulService.getAsset(params.get('id')))
.subscribe((asset) => {
  this.asset = asset;
  console.log(this.asset[0].fields.asset[0].fields.vimeoId);
  setTimeout(() => {
    const video = new Vimeo.Player('video');
  }, 500);
});
}

但是，而不是做一些如此hacky的东西..