按下模型按钮后我得到的标题总是相同，我没有得到不同的模态标题

问题描述

我的api数据格式如此

{
id: "1",video_url: "http://orangevalleycaa.org/api/media/videos/WomanSculptsClayMusic_042009083.mp4",name: "Modeling Faces in Clay with Janet Blake",description: "This workshop,lead by acclaimed sculptor,and OVCAA resident artist,Janet Blake,is a don't miss experience. Janet shares tips and tricks that have made her one of the foremost artists in modeling faces in clay. Her engaging style will have you clamoring for more.",duration: "00:00:38",created_by: "Ronald Winter,Video Producer,OVCAA ",image: "http://orangevalleycaa.org/api/media/images/WomanSculptsClay_042009083.png",thumbnail: "http://orangevalleycaa.org/api/media/images/thumbs/WomanSculptsClay_042009083.png",cropped: "http://orangevalleycaa.org/api/media/images/cropped/WomanSculptsClay_042009083.png",file_name_original: "Woman sculpts clay_042009083.mp4",popularity: "10",category_id: "2",category: "Craft",keywords: "clay,face,janet blake,sculpture"
}
like this data i have

我的模板文件是

<div class="row-12" >
  <div class="row-sm-12">
    <div class="col-sm-4" *ngFor="let list of activityList">
      <div class="panel-group">
        <div class="panel panel-info">
          <div class="panel-heading">{{ list.name }}</div>
          <div class="panel-body">
            <img [src]="list.image" width="320" height="240" />
            <div>Category: {{ list.category }}</div>
            <div>Duration: {{ list.duration }}</div>
            <div>Popularity: {{ list.popularity }}</div>
            <!-- Trigger the modal with a button -->
            <button
              type="button"
              class="btn btn-success btn-sm"
              data-toggle="modal"
              data-target="#myModal"
            >
              Watch Video
            </button>
            <!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">{{list.name}}</h4>
      </div>
      <div class="modal-body">
        <div >
          <video width="530" height="240" controls  [src] = "list.video_url">
             Your browser does not support the video tag.
         </video>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

在面板标题中，我们使用* ngFor获得不同的值。例如与珍妮特·布莱克（Janet Blake）在《粘土中的人脸建模》中， 火舞者闪耀明亮。 为什么在按“立即观看”模型按钮后获得视频链接。我一直获得id = 1视频网址 请帮助我。

解决方法

我想是因为您对所有模态使用相同的ID：id="myModal"