我在这里创建了 angular application.in，我想使用 [innerHTML] 属性注入一些内容，如下所示
export class AppComponent {
name = 'Angular';
public bar = 'bars';
foo = `<div>`+this.bar+`
</div>
<button type="button" onclick="alert('Hello world!')">Click Me!</button>
`;
}我在 html 文件中使用了这个，如下所示
<div [innerHTML]="foo"></div>但我只是简单地只返回 div 元素。按钮控件未呈现。
我已经创建了一个 stackb 示例供您参考。请提供任何想法如何做到这一点
示例 - https://stackblitz.com/edit/angular-ena2xj?file=src/app/app.component.ts
参考 - Angular HTML 绑定
我有来自数据库的产品数据包含标题,描述......描述是html格式的字符串,如下所示:
<b>Name:</b> iPhone 5;<br>
<b>Membery:</b> 8GB;<br>
<b>Condition:</b> Brand new;<br />
如果应该显示如下:
名称: iPhone 5;
内存: 8GB;
条件:全新
但是当我在Angular2:{{product.description}}中使用数据绑定时,它显示为纯文本:
<b>Name:</b> iPhone 5; <br /><b>Memory:</b> 8GB;<br /><b>Condition:</b> Brand new;<br />
我应该如何正确显示为html？绑定没有html过滤器.
如何使用字符串插值动态添加 html 元素而不添加任何 html 标签？经验：
这是我组件中的 obj
myObj = {
title: 'Header Title',
icon: '<i class="fa fa-user">'
}
我想添加这样的；
<header>
{{myObj.title}} - {{myObj.icon}}
</header>
{{myObj.icon}} 呈现为文本，但我想呈现为 html。怎么能？
我希望结果如下
<header>
Header Title <i class ="fa fa-user"></i>
</header>
如果我像这样改变我的 obj ；
myObj = {
title: 'Header Title',
icon: '<mat-icon>search</mat-icon>'
}
呈现为
<header>
Header Title <mat-icon>search</mat-icon>
</header>
在 ionic2 项目中，我需要在 *ngFor 循环中的标签内呈现一些 html 内容。
这是我的模板：
<ion-content padding>
<ion-list>
<ion-item *ngFor="let post of posts">
<ion-thumbnail item-left>
<lazy-img src="{{post.thumbnail}}"></lazy-img>
</ion-thumbnail>
<h2>{{post.title}}</h2>
<p>{{post.content}}</p>
<button ion-button clear item-right (click)="viewPage(post)">View</button>
</ion-item>
</ion-list>
在post.content我有一些 html 标签。我怎样才能正确渲染它？
如何使用字符串变量（保持模板）呈现 html - Angular4。
样本.component.ts
let stringTemplate = "<div><p>I should be rendered as a HTML<br></p></div>";
sample.component.html应该基于变量stringTemplate 中的元素呈现
注意：stringTemplate不是静态的。将从服务器获取其数据。
当我通过角度插值分配一些html标签（如按钮）或自定义标签时插值出现问题，但未显示
在component.html文件中
<div [innerHTML]="html"></div>
在component.ts文件中
html = "<h1>Header</h1> <button>Button</button>"
无法在有角https://stackblitz.com/edit/angular-j5gsb4?embed=1&file=app/app.component.ts中工作
它在纯html / js中工作 https://plnkr.co/edit/3PWexJjKbOEe50egKjqJ?p=preview
我向服务器发出请求并获得 JSON 结果：
{"result" => "HTML code"}
如何解析 HTML 代码并从此响应中获取表格？
我试图将此代码放在页面上的隐藏块中：
<div #content>HTML code here from response</div>
接下来是什么？如何解析？
我正在尝试将 HTML 作为消息参数传递到我的 Mat Dialog 代码中。所以我有以下内容，但不确定如何将 HTML 传递给它。
openAlertDialog() {
const dialogRef = this.dialog.open(AlertDialogComponent,{
data:{
message: '<!DOCTYPE html><html><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>',
buttonText: {
cancel: 'Done'
}
},
});
}
我想在以下内容中添加 HTMLmessage
我在这里有一个代码的 stackblitz https://stackblitz.com/edit/mat-dialog-example-kchzml?file=app/app.component.ts
知道我该怎么做吗？
在 Angular 9+ 中，我可以成功地将字符串转换为 html，然后使用innerHtml 和bypassSecurityTrustHtml() 加载该html。
我的问题是还可以动态加载/渲染转换后的 html 以包含和识别 Angular/javascript 标记语言，例如 *ngIf、手柄栏和单击事件。
下面是迄今为止尝试的代码和 stackblitz，但正如您所看到的，它无法识别标记。
https://stackblitz.com/edit/dynamic-angular?file=app/app.component.ts
export class AppComponent implements OnInit {
text: string = "Hello world";
content: any;
constructor(private domSantizer: DomSanitizer) {}
ngOnInit() {
let body: any =
'<div>{{text}}<div><br><button (click)="test()">Test</button>';
this.content = this.domSantizer.bypassSecurityTrustHtml(body);
}
test() {
alert("It works");
}
}
网页
<div [innerHTML]="content"></div>
嗨我过去几天一直在努力学习Angular,我想使用ngHtmlBind或ngInclude指令.但是,当我使用它并提供我的应用程序时,控制台会说:
未捕获错误:模板解析错误:
无法绑定到'ngBindHtml',因为它不是'div'的已知属性.未捕获错误:模板解析错误:
无法绑定到'ngInclude',因为它不是'div'的已知属性.
我在阅读文档时感到茫然.也许是因为我使用CLI并且指令被不同地调用(即代替'ng-for',它被实现为*ngFor)？
我尝试了ngFor和ngIf并且它们正常工作.但是当我使用ngBindHtml和ngInclude时,错误就出现了.
这是我的代码:
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { SonglistComponent } from './songlist/songlist.component';
import { ChartComponent } from './chart/chart.component';
import { DataService } from './data.service';
import { SafePipe } from './safe.pipe';
@NgModule({
declarations: [
AppComponent,
SonglistComponent,
ChartComponent,
SafePipe
],
imports: [
BrowserModule
],
providers: [DataService],
bootstrap: [AppComponent]
})
export class AppModule { }
chart.component.html
<div class="chart" *ngFor="let song of dataService.currentPlaylist"> …angular ×10
html ×5
javascript ×2
angular-cli ×1
angular6 ×1
angular7 ×1
angular8 ×1
css ×1
dynamic ×1
innerhtml ×1
ionic2 ×1
ngfor ×1
rendering ×1
typescript ×1