stackoom
  简体   繁体   中英

How to bind html in Angular 8

 原文  2020-02-11 18:59:24  1   1    html/ css/ angular/ typescript/ plot

Question

I am struggling to display html in Angular 8. I am developing an app in angular 8 and my back-end code is in Flask. My front-end is receiving a JSON data which is a html template. Now I need to display that template in Angular.

The JSON data I am receiving is given below:

` 

<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>

` The issue I am facing is that I am unable to display the plot which is in above html template in Angular. The same template if I save it in a file with .html extension and then try to open that file in browser the get to see the plot in browser but same html template do not bind in angular 8, or rather not displaying it.

My app.component.html:

<div [innerHtml] = "someData"></div>

My 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() { }

}

In the above JSON data if I add for example <h1> or <p> tag its showing h1 and p tag content on Angular 8 but not displaying plotly plot. I think there is some issue displaying the plotly plot. Do I need to install any additional package to do this, as I already install plotly.js for my angular project.

1 answers

solution1
 6  2020-02-11 19:42:19

In Angular, you can use innerHTML in your template, like this:

<div [innerHTML]="theHtmlString"></div>

Somewhere in your Typescript component, you can assign the HTML value to theHtmlString :

@Component({
...
})
export class MyComponent {
  theHtmlString: string;

  constructor() {}

  async ngOnInit() {
    this.theHtmlString = await getHtmlPlotFromAPI();
  }  
}

Note that it is typically better practice to return raw JSON data from your backend and bind it to your Angular template on the client side.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to bind html tags in html using angular how to bind html in angular v1.2 How to bind html from JSON API in Angular 8 Bind Html with variables in Angular How to bind angular.js data to imported html? How to bind an Image from App Component to HTML file in Angular 2 How can I bind data to the html attribute in Angular4? How to bind a angular ng-click event on after lnserted HTML How Do I Get HTML To Bind Properly To An Angular App How can I bind Width of another element in Angular 2 - HTML?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM