如何解决按下模型按钮后我得到的标题总是相同,我没有得到不同的模态标题
我的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">×</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"
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。