[英]How to render html data from JSON in a modal angular 8
I have a html table stored in a database table.我有一个 html 表存储在数据库表中。 I am fetching the html table using a get request, but for some reason, I cant seem to render the html from the api to the modal.我正在使用获取请求获取 html 表,但出于某种原因,我似乎无法将 html 从 api 渲染到模态。
How I am fetching the html table from the api我如何从 api 中获取 html 表
async loadReportData(eaCode): Promise<void> {
this.html_content = this.service.getHtmlReport(code);
//this.teamMembersData = await this.re.getTeamMembers(this.currentProjectId, teamId);
console.log(this.service.getHtmlReport(code))
}
my angular modal where am trying to render the html table我的 angular 模态正在尝试渲染 html 表
<ng-template #viewTeamModal let-modal>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-11">
<h4 class="card-title" style="color: black;"><span class="lstick"></span>Report</h4>
</div>
<div class="col-1">
<button type="button" class="close" label="Close" (click)="modal.dismiss('Cross click');">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
<div class="row">
<div class="table-responsive">
</div>
</div>
</div>
</div>
</div>
</div>
</ng-template>
the html table being fetched from the api从 api 获取 html 表
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
when I try to console log I get当我尝试控制台日志时,我得到
Observable
operator: MapOperator {thisArg: undefined, project: ƒ}
source: Observable {_isScalar: false, source: Observable, operator: MapOperator}
_isScalar: false
__proto__: Object
what am I doing wrong.我究竟做错了什么。 Thank you in advance先感谢您
Nothing wrong, just that it seems like the method this.service.getHtmlReport(code) returns an Observable.没有错,只是 this.service.getHtmlReport(code) 方法似乎返回了一个 Observable。
This will log the actual value:这将记录实际值:
this.service.getHtmlReport(code).subscribe(code => { console.log(code); })
Is it recommended where possible to handle the subscription using the async pipe. I put it inside OnInit but that is just for the sake of example, you can use it where you need:是否建议在可能的情况下使用异步 pipe 处理订阅。我将它放在 OnInit 中,但这只是为了举例,您可以在需要的地方使用它:
public code: Observable; ngOnInit() {... this.code = this.service.getHtml(code); }
and inside the template:在模板内部:
<div class="table-responsive" [innerHTML]="code | async"></div>
If you haven't read about observables these resources might be useful for start:如果您还没有阅读过有关 observables 的资料,这些资源可能对您有所帮助:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.