[英]How can I create many modals dynamically with ngFor Angular?
I'm getting an array of objects.我得到了一个对象数组。 In every object, one of the values is a link of a document or an image, then I have to show in a modal that file or image in a frame or something like that.在每个对象中,其中一个值是文档或图像的链接,然后我必须以模式显示该文件或图像在框架中或类似的东西。 The only way that I can do it manually was like this:我可以手动完成的唯一方法是这样的:
<object data="https://.../sample.pdf" type="application/pdf" width="100%"
height="500px">
Then, I tried to set the URL in the data of the HTML <object>
to show it in just one modal.然后,我尝试在 HTML <object>
的数据中设置 URL,以仅以一种模式显示它。 But I can`t do it, so the last idea was to make one modal for each file, but I can´t too.但是我做不到,所以最后一个想法是为每个文件制作一个模态,但我也做不到。
Here is my current code for the dynamic modals.这是我当前的动态模态代码。
<tr *ngFor="let row of rows">
<td>
<button data-toggle="modal" attr.data-target="modal-{{row.id}}">
Documento
</button>
</td>
</tr>
Here is the modal.这是模态。
<div *ngFor="let row of rows">
<div class="modal fade" attr.id="modal-{{row.id}}" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Vista previa documento</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class="fal fa-times"></i></span>
</button>
</div>
<div class="modal-body">
<object attr.data="{{row.document}}" type="application/pdf"
width="100%" height="500px">
</object>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Subir</button>
</div>
</div>
</div>
</div>
</div>
But it doesn`t work.但它不起作用。
I`ve tried both ideas, but no one works.我已经尝试了两种想法,但没有一个可行。 I'm kind of knew it Angular, so I'm trying to understand all this.我有点知道它是 Angular,所以我试图理解这一切。 Thanks!谢谢!
Instead of creating one modal per document, I would create one single modal and change its content based on which button I click:我不会为每个文档创建一个模式,而是创建一个模式并根据我单击的按钮更改其内容:
For the button:对于按钮:
<button *ngFor="let row of rows" (click)="setSelectedRow(row)">
Documento {{row.id}}
</button>
For the modal:对于模态:
<div class="modal fade" id="single-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Vista previa documento {{selectedRow?.id}}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class="fal fa-times"></i></span>
</button>
</div>
<div class="modal-body">
<iframe *ngIf="selectedRow"
[src]="selectedRow.document"
width="100%" height="500px">
</iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Subir</button>
</div>
</div>
</div>
</div>
And in the controller:在控制器中:
setSelectedRow(row: any) {
this.selectedRow = row;
$('#single-modal').modal("show");
}
See a working StackBlitz here .在此处查看有效的StackBlitz 。
You can also do it with an <object>
, likely you'll need a different method from the DomSanitizer (try the sanitize
method).您也可以使用<object>
来完成它,可能您需要与DomSanitizer不同的方法(尝试sanitize
方法)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.