Question

我创建了一个带有youtube iframe的引导程序模式。另外，我还有一份新闻列表，其中包含自己的图片，标题和正文。这样的想法是，每当我单击特定的新闻图片时，都应显示带有iframe的上述模式。每个新闻文章都有自己的item.youtube，其中带有youtube链接，因此当我们打开模式时应显示特定的视频。我尝试这样做，但是似乎有一个问题：即使单击其他新闻文章图像，也只显示一个视频，第一篇文章的youtube视频（item.youtube）。

我应该怎么解决这个问题？

这是我的HTML：

<div class="paragraph-items" *ngFor="let section of page">

  <section class="news">


    <div class="news-items-wrapper">
      <div class="news-wrapper" *ngFor="let item of section.items">
        <div class="news-item-wrapper">
            <div class="modal" id="myModal">
                <div class="modal-dialog">
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                  <div class="modal-content">
                        <iframe width="560" height="315" [src]="item.youtube | youtube" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                  </div> 
                </div>
              </div>
          <a class="thumb" data-toggle="modal" data-target="#myModal" href="#"
             [ngStyle]="{'background-image': 'url(' + item.thumbnail + ')'}">
          </a>
          <div class="info">
            <a class="title" [href]="item.youtube" target="_blank">{{ item.title }}</a>
            <div class="description mt-3" [innerHTML]="item.description"></div>
          </div>
        </div>
      </div>
    </div>

  </section>
</div>

单击一张图片时无法显示模态iframe视频

0 个答案: