0

我花了几天时间尝试修改 src attr，但没有成功。任何帮助将不胜感激。这是 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 中创建了多个模态。“澄清”按钮中的 open() 函数也有效，但嵌入中的 src 属性无效。我尝试过使用常规引导程序、ng-bootstrap 和 ngx-bootstrap，结果都相同。有任何想法吗？

谢谢你。

4

1 回答 1

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
于 2019-11-25T19:21:54.537 回答