如何在 Angular 8 中绑定 html
[英]How to bind html in Angular 8
问题描述
我正在努力在 Angular 8 中显示 html。我正在 angular 8 中开发一个应用程序，我的后端代码在 Flask 中。 我的前端正在接收一个 JSON 数据，它是一个 html 模板。 现在我需要在 Angular 中显示该模板。
我收到的 JSON 数据如下：
`
<html>
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style>body{ margin:0 100; background:whitesmoke; }</style>
</head>
<body>
<h1></h1>
<div>
<div id="bff3697b-6ab4-4b03-9932-87484de30381" class="plotly-graph-div" style="height:100%; width:100%;"></div>
<script type="text/javascript">
window.PLOTLYENV=window.PLOTLYENV || {};
if (document.getElementById("bff3697b-6ab4-4b03-9932-87484de30381")) {
Plotly.newPlot(
'bff3697b-6ab4-4b03-9932-87484de30381',
[{"histnorm": "probability", "opacity": 0.8, "type": "histogram", "x": [7665.7, 16227.56, 5445.08, 4294.01, 3047.38, 5792.88, 7783.29, 10969.92, 3976.19, 13985.95, 6483.98, 5076.62, 3846.69, 7423.5, 6705.06, 4447.09, 5558.81, 5744.26, 5157.67, 5464.3, 4803.11, 6736.29, 4400.25, 4484.76, 5003.46, 6313.67, 4096.05, 7641.69, 7888.45, 13288.3, 16026.95, 5317.73, 6627.48, 10342.09, 9298.19, 5579.38, 5891.89, 5705.15, 5392.63, 5067.95, 5657.95, 5476.77, 3743.82, 7279.83, 3888.18, 4015.99, 5205.88, 6687.31, 5946.34, 3610.91, 3973.64, 3195.0, 11049.83, 5227.45, 6193.73, 6591.53, 7057.34, 5737.5, 5258.5, 5069.92, 7953.26, 9283.54, 20324.1, 6967.87, 7435.68, 8926.81, 15106.95, 9990.29, 8352.12, 9858.95, 12826.69, 10861.36, 11405.47, 8848.72, 6619.18, 12410.85, 16577.89, 16159.03, 5420.87, 24308.08, 16805.05, 11619.75, 14463.16, 9663.49, 13049.21, 12432.9, 18482.13, 19264.55, 8231.32, 7914.63, 5614.09, 7130.98, 17311.07, 17664.37, 16790.96, 7568.41, 13016.7, 13253.78, 11118.24, 9756.02, 7754.46, 16462.75, 9420.9, 5456.42, 5342.85, 13557.58, 6291.29, 7484.99, 7330.86, 16943.34, 23108.17, 11866.71, 24322.77, 17990.83, 10609.29, 11754.42, 16209.23, 20445.39, 16411.1, 13269.05, 15041.91, 9685.15, 32292.39, 11588.38, 15466.97, 21857.76, 19501.92, 13998.62, 23485.92, 30581.47, 18229.58, 14396.43, 17588.07, 15501.08, 8244.17, 12275.61, 14533.65, 17338.42, 13910.32, 24438.67, 22122.61, 17292.22, 18912.3, 13955.66, 13300.51, 11405.18, 14351.98, 15731.26, 33969.35, 10393.69, 11834.89, 11072.75, 18563.32, 12115.78, 11548.46, 15311.1, 17217.91, 16151.7, 18554.97, 14446.26, 11165.57, 15348.44, 19014.68, 18717.08, 11900.41, 17082.0, 15714.11, 14843.93, 23042.99]}, {"line": {"color": "black"}, "opacity": 0.8, "type": "scatter", "x": [3047.38, 3359.7231313131315, 3672.066262626263, 3984.409393939394, 4296.752525252525, 4609.095656565656, 4921.4387878787875, 5233.781919191919, 5546.12505050505, 5858.468181818182, 6170.811313131313, 6483.154444444444, 6795.497575757576, 7107.840707070707, 7420.183838383838, 7732.526969696969, 8044.8701010101, 8357.213232323233, 8669.556363636362, 8981.899494949495, 9294.242626262625, 9606.585757575756, 9918.928888888888, 10231.27202020202, 10543.61515151515, 10855.958282828282, 11168.301414141413, 11480.644545454543, 11792.987676767676, 12105.330808080806, 12417.673939393939, 12730.017070707068, 13042.360202020202, 13354.703333333331, 13667.046464646464, 13979.389595959594, 14291.732727272727, 14604.075858585857, 14916.41898989899, 15228.76212121212, 15541.105252525253, 15853.448383838382, 16165.791515151512, 16478.134646464645, 16790.477777777774, 17102.820909090908, 17415.164040404037, 17727.50717171717, 18039.8503030303, 18352.193434343433, 18664.536565656563, 18976.879696969696, 19289.222828282826, 19601.56595959596, 19913.90909090909, 20226.25222222222, 20538.59535353535, 20850.938484848484, 21163.281616161614, 21475.624747474747, 21787.967878787877, 22100.31101010101, 22412.65414141414, 22724.997272727273, 23037.340404040402, 23349.68353535353, 23662.026666666665, 23974.369797979794, 24286.712929292928, 24599.056060606057, 24911.39919191919, 25223.74232323232, 25536.085454545453, 25848.428585858583, 26160.771717171716, 26473.114848484845, 26785.45797979798, 27097.80111111111, 27410.14424242424, 27722.48737373737, 28034.830505050504, 28347.173636363634, 28659.516767676763, 28971.859898989896, 29284.203030303026, 29596.54616161616, 29908.88929292929, 30221.232424242422, 30533.57555555555, 30845.918686868685, 31158.261818181814, 31470.604949494948, 31782.948080808077, 32095.29121212121, 32407.63434343434, 32719.977474747473, 33032.3206060606, 33344.66373737373, 33657.00686868686, 33969.35], "y": [0.249283457622531, 0.2674333873470217, 0.2861467938154564, 0.3053607661797153, 0.3250039824583579, 0.34499692347945327, 0.3652522125488463, 0.3856750833735535, 0.40616397648807745, 0.42661126200403043, 0.44690408398108245, 0.46692531915597935, 0.4865546402264487, 0.5056696714311, 0.5241472218586721, 0.5418645798229751, 0.5587008498135356, 0.5745383120314507, 0.5892637833938382, 0.6027699581788769, 0.6149567062172908, 0.6257323067348848, 0.6350145966220898, 0.6427320130458113, 0.6488245119089158, 0.6532443456739198, 0.6559566864585457, 0.6569400830298694, 0.6561867433094863, 0.6537026371855928, 0.6495074177344868, 0.6436341623055888, 0.636128938241205, 0.6270502012064288, 0.6164680371206057, 0.6044632614398879, 0.5911263919781937, 0.5765565135180727, 0.5608600541108191, 0.5441494941655111, 0.5265420301605734, 0.5081582150726898, 0.489120597412479, 0.4695523801024612, 0.4495761193595623, 0.42931248229090196, 0.4088790801254196, 0.388389391939393, 0.36795179145053275, 0.3476686870155601, 0.32763578243376934, 0.30794146359709057, 0.288666313496316, 0.26988275565011915, 0.2516548237196403, 0.23403805295152275, 0.21707948719385872, 0.20081779358192822, 0.18528347561510858, 0.17049917425564357, 0.15648004587882092, 0.14323420538945944, 0.1307632225814578, 0.1190626598392077, 0.10812263954041262, 0.09792842999345658, 0.08846103939997974, 0.07969780814361545, 0.07161299063678907, 0.06417831897683102, 0.057363541738973275, 0.05113693233729595, 0.04546576248778323, 0.040316737385615496, 0.035656390240083526, 0.031451434776970426, 0.027669075205349968, 0.024277273942556778, 0.021244978090104335, 0.01854230625037641, 0.01614069776781578, 0.014013026870604623, 0.01213368448330337, 0.010478630683371588, 0.009025420892231873, 0.007753208933006081, 0.006642730061455654, 0.0056762669936145475, 0.004837601822833305, 0.004111956549991866, 0.0034859247526226496, 0.0029473967001460246, 0.002485479991154406, 0.0020904175516451773, 0.0017535045963510698, 0.0014670059239780112, 0.0012240746954412796, 0.001018673635405657, 0.0008454994040622246, 0.0006999107098184589]}],
{"showlegend": false, "template": {"data": {"scatter": [{"type": "scatter"}]}}, "title": {"text": "Total Volume: Histogram and Normalized-Density"}},
{"responsive": true}
)
};
</script>
</div>
</body>
</html>
` 我面临的问题是我无法在 Angular 中显示上面 html 模板中的绘图。 相同的模板，如果我将其保存在扩展名为 .html 的文件中，然后尝试在浏览器中打开该文件，则可以在浏览器中查看绘图，但相同的 html 模板不会在 angular 8 中绑定，或者不显示它。
我的 app.component.html：
<div [innerHtml] = "someData"></div>
我的 app.component.ts：
import { Component, OnInit, ViewChild} from '@angular/core';
@Component({
selector: 'app-data-decomposition',
templateUrl: './data-decomposition.component.html',
styleUrls: ['./data-decomposition.component.css']
})
export class DataDecompositionComponent implements OnInit {
someData = `<html>
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style>body{ margin:0 100; background:whitesmoke; }</style>
</head>
<body>
<h1></h1>
<div>
<div id="bff3697b-6ab4-4b03-9932-87484de30381" class="plotly-graph-div" style="height:100%; width:100%;"></div>
<script type="text/javascript">
window.PLOTLYENV=window.PLOTLYENV || {};
if (document.getElementById("bff3697b-6ab4-4b03-9932-87484de30381")) {
Plotly.newPlot(
'bff3697b-6ab4-4b03-9932-87484de30381',
[{"histnorm": "probability", "opacity": 0.8, "type": "histogram", "x": [7665.7, 16227.56, 5445.08, 4294.01, 3047.38, 5792.88, 7783.29, 10969.92, 3976.19, 13985.95, 6483.98, 5076.62, 3846.69, 7423.5, 6705.06, 4447.09, 5558.81, 5744.26, 5157.67, 5464.3, 4803.11, 6736.29, 4400.25, 4484.76, 5003.46, 6313.67, 4096.05, 7641.69, 7888.45, 13288.3, 16026.95, 5317.73, 6627.48, 10342.09, 9298.19, 5579.38, 5891.89, 5705.15, 5392.63, 5067.95, 5657.95, 5476.77, 3743.82, 7279.83, 3888.18, 4015.99, 5205.88, 6687.31, 5946.34, 3610.91, 3973.64, 3195.0, 11049.83, 5227.45, 6193.73, 6591.53, 7057.34, 5737.5, 5258.5, 5069.92, 7953.26, 9283.54, 20324.1, 6967.87, 7435.68, 8926.81, 15106.95, 9990.29, 8352.12, 9858.95, 12826.69, 10861.36, 11405.47, 8848.72, 6619.18, 12410.85, 16577.89, 16159.03, 5420.87, 24308.08, 16805.05, 11619.75, 14463.16, 9663.49, 13049.21, 12432.9, 18482.13, 19264.55, 8231.32, 7914.63, 5614.09, 7130.98, 17311.07, 17664.37, 16790.96, 7568.41, 13016.7, 13253.78, 11118.24, 9756.02, 7754.46, 16462.75, 9420.9, 5456.42, 5342.85, 13557.58, 6291.29, 7484.99, 7330.86, 16943.34, 23108.17, 11866.71, 24322.77, 17990.83, 10609.29, 11754.42, 16209.23, 20445.39, 16411.1, 13269.05, 15041.91, 9685.15, 32292.39, 11588.38, 15466.97, 21857.76, 19501.92, 13998.62, 23485.92, 30581.47, 18229.58, 14396.43, 17588.07, 15501.08, 8244.17, 12275.61, 14533.65, 17338.42, 13910.32, 24438.67, 22122.61, 17292.22, 18912.3, 13955.66, 13300.51, 11405.18, 14351.98, 15731.26, 33969.35, 10393.69, 11834.89, 11072.75, 18563.32, 12115.78, 11548.46, 15311.1, 17217.91, 16151.7, 18554.97, 14446.26, 11165.57, 15348.44, 19014.68, 18717.08, 11900.41, 17082.0, 15714.11, 14843.93, 23042.99]}, {"line": {"color": "black"}, "opacity": 0.8, "type": "scatter", "x": [3047.38, 3359.7231313131315, 3672.066262626263, 3984.409393939394, 4296.752525252525, 4609.095656565656, 4921.4387878787875, 5233.781919191919, 5546.12505050505, 5858.468181818182, 6170.811313131313, 6483.154444444444, 6795.497575757576, 7107.840707070707, 7420.183838383838, 7732.526969696969, 8044.8701010101, 8357.213232323233, 8669.556363636362, 8981.899494949495, 9294.242626262625, 9606.585757575756, 9918.928888888888, 10231.27202020202, 10543.61515151515, 10855.958282828282, 11168.301414141413, 11480.644545454543, 11792.987676767676, 12105.330808080806, 12417.673939393939, 12730.017070707068, 13042.360202020202, 13354.703333333331, 13667.046464646464, 13979.389595959594, 14291.732727272727, 14604.075858585857, 14916.41898989899, 15228.76212121212, 15541.105252525253, 15853.448383838382, 16165.791515151512, 16478.134646464645, 16790.477777777774, 17102.820909090908, 17415.164040404037, 17727.50717171717, 18039.8503030303, 18352.193434343433, 18664.536565656563, 18976.879696969696, 19289.222828282826, 19601.56595959596, 19913.90909090909, 20226.25222222222, 20538.59535353535, 20850.938484848484, 21163.281616161614, 21475.624747474747, 21787.967878787877, 22100.31101010101, 22412.65414141414, 22724.997272727273, 23037.340404040402, 23349.68353535353, 23662.026666666665, 23974.369797979794, 24286.712929292928, 24599.056060606057, 24911.39919191919, 25223.74232323232, 25536.085454545453, 25848.428585858583, 26160.771717171716, 26473.114848484845, 26785.45797979798, 27097.80111111111, 27410.14424242424, 27722.48737373737, 28034.830505050504, 28347.173636363634, 28659.516767676763, 28971.859898989896, 29284.203030303026, 29596.54616161616, 29908.88929292929, 30221.232424242422, 30533.57555555555, 30845.918686868685, 31158.261818181814, 31470.604949494948, 31782.948080808077, 32095.29121212121, 32407.63434343434, 32719.977474747473, 33032.3206060606, 33344.66373737373, 33657.00686868686, 33969.35], "y": [0.249283457622531, 0.2674333873470217, 0.2861467938154564, 0.3053607661797153, 0.3250039824583579, 0.34499692347945327, 0.3652522125488463, 0.3856750833735535, 0.40616397648807745, 0.42661126200403043, 0.44690408398108245, 0.46692531915597935, 0.4865546402264487, 0.5056696714311, 0.5241472218586721, 0.5418645798229751, 0.5587008498135356, 0.5745383120314507, 0.5892637833938382, 0.6027699581788769, 0.6149567062172908, 0.6257323067348848, 0.6350145966220898, 0.6427320130458113, 0.6488245119089158, 0.6532443456739198, 0.6559566864585457, 0.6569400830298694, 0.6561867433094863, 0.6537026371855928, 0.6495074177344868, 0.6436341623055888, 0.636128938241205, 0.6270502012064288, 0.6164680371206057, 0.6044632614398879, 0.5911263919781937, 0.5765565135180727, 0.5608600541108191, 0.5441494941655111, 0.5265420301605734, 0.5081582150726898, 0.489120597412479, 0.4695523801024612, 0.4495761193595623, 0.42931248229090196, 0.4088790801254196, 0.388389391939393, 0.36795179145053275, 0.3476686870155601, 0.32763578243376934, 0.30794146359709057, 0.288666313496316, 0.26988275565011915, 0.2516548237196403, 0.23403805295152275, 0.21707948719385872, 0.20081779358192822, 0.18528347561510858, 0.17049917425564357, 0.15648004587882092, 0.14323420538945944, 0.1307632225814578, 0.1190626598392077, 0.10812263954041262, 0.09792842999345658, 0.08846103939997974, 0.07969780814361545, 0.07161299063678907, 0.06417831897683102, 0.057363541738973275, 0.05113693233729595, 0.04546576248778323, 0.040316737385615496, 0.035656390240083526, 0.031451434776970426, 0.027669075205349968, 0.024277273942556778, 0.021244978090104335, 0.01854230625037641, 0.01614069776781578, 0.014013026870604623, 0.01213368448330337, 0.010478630683371588, 0.009025420892231873, 0.007753208933006081, 0.006642730061455654, 0.0056762669936145475, 0.004837601822833305, 0.004111956549991866, 0.0034859247526226496, 0.0029473967001460246, 0.002485479991154406, 0.0020904175516451773, 0.0017535045963510698, 0.0014670059239780112, 0.0012240746954412796, 0.001018673635405657, 0.0008454994040622246, 0.0006999107098184589]}],
{"showlegend": false, "template": {"data": {"scatter": [{"type": "scatter"}]}}, "title": {"text": "Total Volume: Histogram and Normalized-Density"}},
{"responsive": true}
)
};
</script>
</div>
</body>
</html>`
ngOnInit() { }
}
在上面的 JSON 数据中，如果我添加例如<h1> or <p>标签，它会在 Angular 8 上显示h1和p标签内容，但不显示绘图。 我认为显示情节情节存在一些问题。 我是否需要安装任何额外的包来做到这一点，因为我已经为我的 angular 项目安装了 plotly.js。
1 个解决方案
解决方案1
6 2020-02-11 19:42:19
在 Angular 中，您可以在模板中使用innerHTML ，如下所示：
<div [innerHTML]="theHtmlString"></div>
在 Typescript 组件的某个地方，您可以将 HTML 值分配给theHtmlString ：
@Component({
...
})
export class MyComponent {
theHtmlString: string;
constructor() {}
async ngOnInit() {
this.theHtmlString = await getHtmlPlotFromAPI();
}
}
请注意，通常更好的做法是从后端返回原始 JSON 数据并将其绑定到客户端的 Angular 模板。
如何在 ZC31C335EF37283C451B18BA0DD317DE1 中从 JSON API 中绑定 html
[英]How to bind html from JSON API in Angular 8
如何将图像从App Component绑定到Angular 2中的HTML文件
[英]How to bind an Image from App Component to HTML file in Angular 2
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何使用 angular 在 html 中绑定 html 标签
如何在角度v1.2中绑定html
如何在 ZC31C335EF37283C451B18BA0DD317DE1 中从 JSON API 中绑定 html
将 Html 与 Angular 中的变量绑定
如何将angular.js数据绑定到导入的html？
如何将图像从App Component绑定到Angular 2中的HTML文件
如何将数据绑定到 Angular4 中的 html 属性？
插入HTML后如何绑定角度ng-click事件
如何使HTML正确绑定到Angular应用
如何在 Angular 2 - HTML 中绑定另一个元素的宽度？
相关标签