无法在angular7中查看html格式的数据
在Angular 7中，要查看HTML格式的数据，可以使用Angular的内置管道（pipe）来实现。管道是一种用于转换数据的机制，可以在模板中使用管道来格式化和显示数据。
要在Angular 7中查看HTML格式的数据，可以使用内置的安全管道（SafePipe）。安全管道可以将HTML代码标记为安全，以便在模板中正确显示。
以下是使用安全管道在Angular 7中查看HTML格式的数据的步骤：
- 首先，在组件的模板文件中，使用管道语法将要显示的数据传递给安全管道。例如，假设要显示的数据存储在变量
htmlData中，可以使用以下语法将其传递给安全管道： - 首先，在组件的模板文件中，使用管道语法将要显示的数据传递给安全管道。例如，假设要显示的数据存储在变量
htmlData中，可以使用以下语法将其传递给安全管道： - 这里的
safe是安全管道的名称，用于将htmlData标记为安全的HTML代码。 - 接下来，需要创建一个安全管道。在Angular中，可以使用
ng generate pipe命令来生成一个新的管道。打开终端，并在项目的根目录中运行以下命令： - 接下来，需要创建一个安全管道。在Angular中，可以使用
ng generate pipe命令来生成一个新的管道。打开终端，并在项目的根目录中运行以下命令： - 这将生成一个名为
safe的新管道。 - 在生成的安全管道文件中，找到
transform方法，并使用DomSanitizer服务来标记HTML代码为安全。修改transform方法如下： - 在生成的安全管道文件中，找到
transform方法，并使用DomSanitizer服务来标记HTML代码为安全。修改transform方法如下： - 这里的
DomSanitizer服务用于标记HTML代码为安全。transform方法接收一个字符串参数html，并使用bypassSecurityTrustHtml方法将其标记为安全的HTML代码。 - 最后，在模块文件中将安全管道添加到
declarations数组中。打开模块文件（通常是app.module.ts），并将安全管道添加到declarations数组中： - 最后，在模块文件中将安全管道添加到
declarations数组中。打开模块文件（通常是app.module.ts），并将安全管道添加到declarations数组中： - 这样，安全管道就可以在整个应用程序中使用了。
现在，当在Angular 7中使用[innerHTML]绑定来显示HTML格式的数据时，会自动应用安全管道，确保数据以HTML格式正确显示。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云对象存储（COS）、腾讯云内容分发网络（CDN）等。你可以在腾讯云官网上找到这些产品的详细介绍和文档。
腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos 腾讯云内容分发网络（CDN）：https://cloud.tencent.com/product/cdn
相关·内容
我想在我的angular7表单中添加日期/日历，但我不知道如何添加。请帮帮忙。我是新来的，试图通过使用angular7 api和创建一个简单的.net表单来学习。
User.component.html文件
<html>
<form #form="ngForm" (submit)="onSubmit(form)">
<div class="form-group">
<label> USERNAME</label>
<input n
浏览 1提问于2019-06-16得票数 3
回答已采纳
我正在用Angular开发网页应用程序。当我将我的应用程序升级到Angular7时，Date功能不起作用。它给了我错误，比如
DateTime.getFullYear不是一个函数
在我升级到Angular7之前，一切都还好。在package.json中：
"typescript": "^3.1.1", "@angular/cli": "~7.0.2",
"@angular/complier-cli": "~7.0.0".
怎么一回事？
浏览 1提问于2018-11-01得票数 1
2回答
未能构建角7组件库
、、、
我曾经顺利地在角版本11中创建了组件库，没有任何问题，但是当我在角版本7中创建组件库时，我在ng构建组件库时遇到了一个错误。
Cannot find module 'tsickle/src/tsickle'
Require stack:
- D:\Angular7\CSS\node_modules\ng-packagr\lib\ngc\create-emit-callback.js
- D:\Angular7\CSS\node_modules\ng-packagr\lib\ngc\compile-source-files.js
- D:\Angular7\CSS\node_mo
浏览 9提问于2021-07-14得票数 1
我不知道如何正确表达这个问题，但请耐心听我说。 我们已经构建了一个Angular7应用程序，它工作得很好。现在我们的任务是创建一个在功能上有许多相似之处，但布局完全不同的应用程序。 我想从我们构建的组件中创建NPM包，然后将这些组件集成到新项目中。但是，我们需要一个选项来覆盖组件中的HTML和SCSS文件。 如果您有一些最佳实践、文档、教程或示例，请回复。 非常感谢!
浏览 11提问于2019-04-05得票数 0
角版本7，jspdf 1.5.3
我开发了一个使用angular7的webapp应用程序，它也可以在移动浏览器中使用。在按钮点击我生成的pdf使用jspdf，但它不工作的任何移动版本。以各种可能的方式尝试。我以前经常在手机上调试，请帮我处理一下
<button (click)="generatePDF()" class='btn btn-primary pdf'><i class="far fa-file-pdf"></i>Generate PDF</button>
public genera
浏览 1提问于2019-04-03得票数 0
我是angular7的新手，我只是尝试从html文件中的输入类型文件中获取数据。我不会明白的。我得到了文件的名称和不同的规格，但没有得到适当的数据。
重点是readystate不会更改为2，因此result属性永远不会填充它，因此我无法这样获得数据。
据我所知：
TS
onChange(event) {
if (event.target.files && event.target.files.length > 0) {
const file = event.target.files[0];
const reader = new FileReader()
浏览 2提问于2019-04-23得票数 1
回答已采纳
我在用angular7。只需创建一些文本框，然后提醒该文本框值。但我无法从打字稿中得到价值。请帮助我，伙计们，如何进行更多这一步。
about.component.html
<input type="text" name="username">
<button (click)="lgbtnclick()" type="button" name="button"></button>
about.component.ts
import { Component, OnInit }
浏览 3提问于2019-02-23得票数 6
回答已采纳
我想在画布上使用angular7和fabric js将pdf显示为图像 我找不到任何可以在angular7中尝试的代码
浏览 18提问于2019-10-03得票数 0
回答已采纳
angular7集成TIM，create时，路由全部卡死，无法正确返回路由，删除了TIM.create，路由又全部好了，根本无法集成上项目
浏览 312提问于2019-10-25
精确错误是“致命错误:无法重新声明/usr/home/adpca/public_html/adpca.org.736/modules/user/user.module:863) ()”(以前在/usr/home/adpca/public_html/adpca.org.736/modules/php/php.module(80)：eval()d代码中在第23行的user_has_role()中声明)。
这是在我已经通过代码库查看函数user_has_role的任何复制，但找不到任何eval语句中的。此外，还在数据库中寻找任何可能触发重复版本的东西，但到目前为止还没有喜悦。有人知道要找什么吗？
浏览 0提问于2015-05-05得票数 0
2回答
我是新的角7，并试图学习如何Http客户端工作。来自角应用程序的APi调用已经发出，但我得到的响应如下
我的service.ts如下所示
export class ReportingFilterService {
shipmentByProjectResult: any[];
constructor(service: DataService) {
}
getShipmentByPrj(): ShipmentByProject[] {
return this.shipmentByProjectResult;
}
}
其中ShipmentByProject
浏览 0提问于2019-08-16得票数 1
回答已采纳
我正在Angular7项目中使用Angular7。当我想更新滑块时，我使用以下代码：
var instance: any = $(".irs-hidden-input").data("ionRangeSlider");
instance.update({
from: Math.floor(Math.random() * (10)),
to: 10
});
$符号类似于jQuery模式，我如何从@ViewChild读取数据？
谢谢你抽出时间来解释。
浏览 0提问于2019-06-01得票数 0
回答已采纳
1回答
实际上，我应该在浏览器中显示JSON数据，到目前为止，我在浏览器响应体中获取数据，但这是问题所在。我正面临着无法在浏览器中显示它的问题，为了更好的理解，请大家帮助我。提前谢谢。
HTML代码是：
<!DOCTYPE html>
<html lang="en">
<head><title>Demo</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /></head>
浏览 0提问于2015-12-17得票数 3
我正在使用angular7，我尝试在文本框中显示值，我从后端获得值，但是我不知道如何在文本框中显示值，有人能给我建议吗？
我在使用回收站和angular7
file.component.ts
ngOnInit() {
let userId = window.localStorage.getItem("editUserId");
if(!userId) {
alert("Invalid action.")
this.router.navigate(['list-user']);
return;
}
alert(userId)
th
浏览 0提问于2019-04-05得票数 1
有没有人知道如何将这个XHR请求的html响应嵌入到Angular7的iframe中？
ngAfterViewInit() {
var link = document.querySelector('#frame');
this.populateIframe(link, "https://localhost:5601/app/kibana",
[['Authorization', 'Basic xxxxxxxxxxx']]);
}
populateIframe(iframe: any, u
浏览 0提问于2019-10-17得票数 0
当我使用角提及库时，我面临着一个问题。
这是我的打字码。
items: Object[] = ["jay","roy","gini","rock","joy","kiya"];
我在component.html file中使用这个已定义的名为component.html file的数组
<input type="text" id="cname" name="cname" placeholder="Type Here.." [m
浏览 0提问于2019-04-03得票数 0
我目前正在研究angular7，并使用
"ngx-extended-pdf-viewer": "^3.3.2",
"pdfjs-dist": "^2.5.207",
"@types/pdfjs-dist": "^2.1.6",
"ng2-pdf-viewer": "^5.3.4",
在ios 12上打开它时，会出现错误。
“错误:未知(承诺)：UnknownErrorException:浏览器/环境缺乏对PDF.js库使用的关键功能的原生支持(例如Readab
浏览 44提问于2022-01-20得票数 1
我正在尝试从web服务获取数据，我正在使用Observable，我正在从web API获得响应，但结果不显示在html上。 以下是我的services.ts getForeports(searchText: string): Observable<FoReport[]> {
return this.http.get(Constant.API_URL + 'getFoReports.php?searchText=' + encodeURIComponent(searchText))
.pipe(map(result=>result['dat
浏览 18提问于2019-09-30得票数 0
我正在工作的应用程序，在前端使用angular7和python flask框架在后端。我正在尝试使用angular构建，即dist文件夹，并根据flask结构在flask中进行配置。
我无法加载此服务器中的图像。其中dist中的图像路径类似于dist/assets/images。
flask
---app.py
---templates
----index.html
---static
---- main6gaugsx.js
---- runtime7gyg.js
--conf files
我尝试将这些图像移动到flask的静态文件夹中。但是我不能在main6gaugsx.j
浏览 1提问于2019-01-11得票数 1
当在两个文本中输入数据时，我有两个文本。那么如何突出显示数据中的不同键或值。例如:在我的html页面中包含两个文本区域，粘贴数据到两个文本区域后，单击差异按钮，突出显示不同的字符串，并使用In angular7计算总差异 string1 = " {
"id": "101",
"created_time": 1603302391,
"created_user_id": "58749658",
浏览 14提问于2020-10-31得票数 0
1回答
用于权限的修复规则
、、、
有两个应用程序使用相同的防火墙数据。1. 前端 2. 后端
前端使用jquery只显示数据。
后端 Angular7管理应用程序，用于为前端创建、更新、删除数据。
现在前端提示错误
错误: PERMISSION_DENIED:权限被拒绝
固定规则
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if true;
}
}
}
码
var dbRef = firebase.database
浏览 0提问于2019-03-14得票数 0
我开始使用Angular7的PrimeNG组件，并设置了我的第一个单选按钮。默认情况下，我可以将特定的单选按钮设置为选中。然而，我的目标是计算表单上存在的单选按钮的数量，如果表单上只有一个单选按钮，则将单选按钮设置为默认选中。如果值是硬编码的，这不是非常理想的方法，但我稍后将为此应用程序添加后端，因此计算单选按钮的数量(来自数据库的行)是至关重要的。
我在网上搜索了解决方案，尤其是Stack，但我很难找到AngularJS或其他相关的解决方案。我想坚持使用Angular。我使用的是Angular7和PrimeNG UI组件。
(PrimeNG文档：)
home.component.html
&
浏览 74提问于2019-05-22得票数 1
回答已采纳
我有一个angular7应用程序和一个Wordpress应用程序。Angular7应用程序在根文件夹中运行。Wordpress在“blog”(子文件夹)中运行。我在angular.json中添加了“博客”作为静态文件夹。我的angular应用程序运行成功。但是我的Wordpress没有运行。 在这里，我附加了这两个文件的.htaccess文件。请帮我解决这个问题 Angular Build：https://example.com Wordpress：https://example.com/blog 适用于Angular应用的.htaccess <IfModule mod_rewrite
浏览 13提问于2020-05-03得票数 0
回答已采纳
在Angular7中的选择列表中设置最初选定的项
我是一个角度框架的初学者。我希望按值设置下拉选择的默认值。应该在.ts文件中添加什么，这样我才能得到预期的结果？
.html文件：
<select name="employees" (change) = "onEdit(emp)" [(ngModel)]="employees" class="form-control">
<option *ngFor="let emp of employees" [value]="emp.id&
浏览 0提问于2019-03-30得票数 2
回答已采纳
我想在我的Angular7项目中将rem设置为10px的倍数。我尝试更改body中的font-size &组件的CSS文件中的HTML标记。但它似乎不起作用。我想知道如何在本地(ie.for a component)和全局(ie.for整个项目)设置自定义字体大小(和rem)？ 提前感谢
浏览 52提问于2019-01-29得票数 2
回答已采纳
我有一个代码，这是基于c#使用网络浏览器。我要做的是将浏览器中的javascript代码改为angular7和typescript
下面是使用javascript中c#函数的c#代码和javascript
在c#中
public int CheckLogin(object phone, object password)
在javascript中
window.external.CheckLogin(number,password)
通过window.external.method从javascript中使用CheckLogin函数很容易
但在typescript中，windows.ex
浏览 3提问于2018-11-30得票数 0
1回答
我正在尝试使用jquery在bootstrap4中实现angular7弹出。我在popper.js中加入了“index.html”，也包括了使用npm。但这不管用。
Uncaught :TypeError不是一个函数
此错误仅出现在控制台中。
HTML:(sample.component.html)
<button id="option2" autocomplete="off" data-toggle="popover"> Public</button>
Jquery：(sample.component.ts)
i
浏览 0提问于2019-03-14得票数 1
回答已采纳
2回答
如何更改angular7项目的十进制格式？我已经研究过了，但我只是为小范围找到了解决方案，并且肯定有一种改变区域设置的方法(我认为它与此相关)，将区域格式化设置为整个项目的默认设置。
为了更简洁，我需要把逗号换成小数点，小数点后面的逗号是:18,245.23欧元--> 18.245，23欧元。
印刷：<span>{{totalPricing | number:'1.0-2'}}€<span>
有人知道怎么做吗？？
浏览 0提问于2019-04-12得票数 3
回答已采纳
我正在开发angular7，并将其与Azure活动目录B2C集成。因此，我在<div id="api"></div>文件中添加了角，所以它应该显示来自AAD方面的字段，但是当我添加这个字段并运行应用程序时，index.html、<app-header>、<app-footer>等组件没有加载，我在index.html中查看铬时看到了这些组件。
还有其他方法来添加<div id="api"></div>吗？还是我做错了？
<body>
<div id="ap
浏览 1提问于2019-05-10得票数 2
1回答
将网站导出到XML页
、、、、
我需要导出一个网站(.html页面)到一个XML文件。该网站包含一个表格与一些数据，我需要在我的网络项目中使用。网站中的表格是使用一些javascript形成的，所以我无法通过获取页面源代码来获取数据。请告诉我如何使用php/python/javascript/perl将网站中的表导出为XML文件。
浏览 0提问于2012-09-06得票数 1
回答已采纳
4回答
我无法将路由param检索为null。我正在使用angular7。请找到下面的代码
HeaderComponent ts文件
import {Router, ActivatedRoute} from '@angular/router';
constructor(private httpService: HttpClient, private router: Router, private activatedRoute: ActivatedRoute) {
this.getNewsSelectedFromRouteParam();
浏览 0提问于2019-01-22得票数 6
回答已采纳
我试图在我的provideIn应用程序中使用“angular7”属性将一个服务注册到一个特定的模块。
test.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TestComponent} from './test.component'
@NgModule({
declarations: [TestComponent],
imports: [
CommonMod
浏览 0提问于2019-02-27得票数 2
我使用angular7命令(由提供的指令)创建了一个ng new my-app项目。我是visual的粉丝，我想进一步使用VisualStudio2017(不是使用visual代码)来开发和调试这个应用程序。
我试着跟在视觉工作室里。
文件->打开->网站(并打开应用程序文件夹)
但是，当我点击“开始调试”或“启动而不调试”时，它会转到"HTTP 403.14 -禁止“页面。
我知道visual中有一个单独的选项来创建角应用程序，但是它将创建一个带有一些c#和.net绑定的角应用程序。我不需要这个，我需要的是纯Angular7应用程序与纯HTML。
浏览 1提问于2019-06-02得票数 0
我需要在表格格式的html表单中动态填充输入字段、标签和文本框。每行包含3列，应该在我的angular7应用程序的不同单元格中填充3个文本框。
例如：
第一行-> Label1: textbox1 Label2: textbox2 Labe31: textbox3第二行...
浏览 3提问于2020-02-16得票数 1
我安装了Angular7 7数据表来格式化表中的数据。我是角7.2.10版。
但犯了错误：
模块未找到:错误:无法解决‘C：\Users\Desktop\角Projects\oshop\node_modules\angular7-data-table\esm5’‘中的@角/材料/输入
安装的引导带和字体可怕，如文件中提到的。将它们添加到angular.json中
angular.json
"styles": [
"src/custom-theme.scss",
"../node_module
浏览 1提问于2019-03-29得票数 1
我有一个在URL中有id的视图。加载此视图时，我调用服务并获取所有用户数据，看起来类似于。 {
"code": 0,
"message": "",
"body": {
"id": 1,
"name": "test",
"profile": [
{
"id": 2,
"descripti
浏览 23提问于2019-01-11得票数 0
如何访问在我的php中通过ajax请求发布的数据。我的ajax请求可以返回一个数据字符串，但是我似乎无法访问作为json对象传递的变量。如何才能访问只包含一个参数的json对象。
jquery：
$.ajax({
type:'POST',
url:"../../webservices/get_rating.php",
data:JSON.stringify({product_id:id}),
dataType:"html",
success: function(data) {
$('
浏览 0提问于2013-04-18得票数 0
回答已采纳
我试图使用html5 +PhoneGap2.5将html5画布数据保存到服务器。
平台：windows 7和8，安卓和IOS。
图像大小调整的基本需求是在发送服务器之前对数据进行优化。
我对android平台的base64响应方法有异议，如下所示
Problems：
Android4.2:我编写了这个代码c.toDataURL("image/jpeg");，但是我得到了这个data:image/png;base64
Android2.3:我无法检索base64数据
我做错什么了吗？
浏览 5提问于2013-03-19得票数 8
回答已采纳
1回答
我在angular7组件中有一个函数。我想调用这个函数，并选择带有id的复选框，类任何可能的解决方案。
get_selected_users(){
checked_users = [01,333,43,54,656,234,234,324];
checked_users.forEach(function(element) {
console.log("element --->",element);
});
Html代码
<input type="checkbox" value="333
浏览 13提问于2020-02-17得票数 0
我正在尝试根据从api接收到的json创建一个角度表。但我知道这个错误：
无法读取未定义的属性“StoreLogId”
下面是我得到的json (我正在使用的列表值)：
[{storeLogId: 18, storeId: 2, userId: 10, ip: "192.168.1.15", logType: 1},{storeLogId: 15, storeId: 2, userId: 10, ip: "192.168.1.15", logType: 1}]
下面是我想在表中显示的html：
<div class="table-resp
浏览 1提问于2019-03-02得票数 2
回答已采纳
必需的角度IOS年历，如在，这是建立在angular7上。但在angular6中使用它时，请向我显示ts1005；应为
浏览 0提问于2019-03-05得票数 0
1回答
我保存媒体(视频)文件，作为我的数据收集从ckeditor5媒体选项的一部分，这是非常好的工作。在请求在另一个页面中保存相同的媒体文件时，我无法显示它。如何显示这些媒体(视频)数据？
数据与生成的html标记一起存储，因此在模板上，我使用v-html来显示其他内容，如<p></p>,<h1></h1>等，但是视频文件没有显示。
在查询数据时，这是它的格式
"<figure class=\"media\"><oembed url=\"https:\/\/www.youtube.com\/watch?
浏览 0提问于2019-09-11得票数 5
回答已采纳
我正在使用angular7，下面是我的代码:在component.ts中
import { Component, OnInit } from "@angular/core";
import { FocusAreasService } from "../../services/focus-areas.service";
@Component({
selector: "app-about",
templateUrl: "./about.component.html",
styleUrls: ["./about.c
浏览 0提问于2019-05-30得票数 1
回答已采纳
我使用的是asp.net和mysql。在Rdlc报告中，我无法显示日期。
首先，它会给出一个错误，比如无法将mysql日期转换为system.date。所以我在连接字符串中添加了Allow Zero Datetime=true；。现在报告显示..。
但其在报告列中显示#Error。
DataSet Name is - mcubicDataSet.xsd DataDable Name is - fo_reserv
在VS2010中预览数据：-
Rdlc报告:-
浏览 1提问于2012-07-28得票数 0
1回答
在组件中读取选定选项的值
、、、
通过使用Angular7 CLI，我试图读取mat-select的值，该值将FormControl附加到FormGroup。在读取值时，它在[object object]中显示值。
作为解决方案之一，我添加了[(value)]="selectedOption"。但这与官方文件不符。
组件代码
purposeControl = new FormControl('', [Validators.required]);
purposeList: Purpose[] = [
{id: '0', value: 'Self Care'}
浏览 1提问于2019-01-29得票数 0
父组件包含一个子组件和一个按钮 父级包含字符串颜色：[color]=color 当点击按钮时， 数据被传递给子对象并触发ngOnChanges parent.html <button (click)=>'changeColor()'>Change Color </button>
<app-child [color]=color></app-child> parent.ts color = {color: 'blue'}
changeColor(){
this.color.color = 'red
浏览 12提问于2019-10-10得票数 0
回答已采纳
1回答
在组件服务类中，使用angular7覆盖基本服务get方法。如果需要映射数据，我希望返回映射数据，否则返回原始数据。这是我的职责：
read(isSelectable:boolean): Observable<IFailureMode> {
const observable = new Observable<IFailureMode>(subscriber => {
if (isSelectable) {
return super.read(filter).subscribe(data=>mapToSelectableMode
浏览 1提问于2019-07-09得票数 0
回答已采纳
在angular 7中，我想使用SVG foreignObject插入一些HTML它不是working.The终端报告error.The angular无法识别HTML标签 这是代码 <g id="peizhi" (click)="config()" style="width: 110px; height: 30px" transform="translate(181,0)">
<!-- <a (click)="config()" style="width: 110px;
浏览 23提问于2019-04-12得票数 5
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
