使用 Angular 修改模态内的 src 属性

Question

我花了几天时间尝试修改 src 属性，但没有成功。任何帮助将不胜感激。这是 HTML

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" 
data-target="#exampleModalScrollable" *ngFor="let doc of docs" style="margin: 20px">View Doc</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog"
    aria-labelledby="exampleModalScrollableTitle" aria-hidden="true" *ngFor="let doc of docs">
    <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <embed src="{{doc}}" frameborder="0" width="1100px" height="600px">
            </div>
            <div class="modal-footer">
                <div class="container">
                    <div class="row">
                        <div class="col align-self-start">
                            <button type="button" class="btn btn-primary" data-dismiss="modal">Approve {{doc}}
                            </button>
                        </div>
                        <div class="col align-self-center" style="right:-100px">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal"
                                (click)="open()">Clarify</button>
                        </div>
                        <div class="col align-self-end pull-right" style="right:-280px">
                            <button type="button" class="btn btn-primary">Deny</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

按钮中的 ngFor 工作正常。 Angular 也在模态框内工作，因为它在 DOM 中创建了多个模态框。 "Clarify" 按钮中的 open() 函数也有效，但嵌入中的 src attr 无效。我尝试过使用常规 bootstrap、ng-bootstrap 和 ngx-bootstrap，结果都相同。有什么想法吗？

谢谢。

Answer 1

这是因为嵌入它是另一个文档，这样的请求是不安全的。
已创建stackblitz，请看如何处理
简而言之，您需要将每个文档包装成

 doc: SafeResourceUrl = this.domSanitizer.bypassSecurityTrustResourceUrl('https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf');

其中 domSanitizer 是

 import { DomSanitizer } from '@angular/platform-browser'
 private domSanitizer : DomSanitizer

使用 Angular 修改模态内的 src 属性

Modify src attribute inside modal with Angular

bootstrap-modal

angular

ngx-bootstrap-modal

ng-bootstrap-modal