如何解决使用 *ngFor 向 DOM 添加字符串数组和 HTMLDivElements
我想使用 CSS display: grid;
someFunction(data) {
this.data = data;
let parentDiv1 = document.createElement('div');
parentDiv1.className = 'div';
parentDiv1.textContent = 'Random Inner Text';
let cb1 = document.createElement('input');
cb1.type = 'checkbox';
cb1.className = 'check-box';
parentDiv1.appendChild(cb1);
this.tableKey = [
'',`Text: ${this.data.someRandomText1}`,`Text: ${this.data.someRandomText2}`,`Text: ${this.data.someRandomText3}`,`Text: ${this.data.someRandomText4}`,`Text: ${this.data.someRandomText5}`,parentDiv1,`Text: ${this.data.someRandomText6}`,`Text: ${this.data.someRandomText7}`,`Text: ${this.data.someRandomText8}`,parentDiv1
];
}
<div class="container">
<div class="table">
<ng-container *ngFor="let item of tableKey" [innerHTML]="item"></ng-container>
</div>
</div>
这就是输出(忽略 CSS)。
现在我想要一个复选框和文本而不是 [object HTMLDivElement]
。有办法吗?
解决方法
方法#1
您可以使用 html 元素的 outerHTML
属性,以便您的数组只包含字符串,然后在模板中清理这些字符串,以便可以显示 html
component.ts
this.tableKey = ["text1","text2",parentDiv1.outerHTML,//Convert html element to string
component.html
<div *ngFor="let item of tableKey" [innerHTML]="item | safeHtml ">
方法#2
在你的例子中只使用一个混合字符串/HtmlElements的数组,并在模板中根据类型决定如何显示它
component.ts
this.tableKey = ["text1",parentDiv1,//array of mixed elements
// ...
public isString(value: any)
{
return typeof(value) ==='string';
}
component.html
<ng-container *ngFor="let item of tableKey" >
<div *ngIf="isString(item)" [innerHTML]="item"></div> <!-- display string -->
<div *ngIf="!isString(item)" [innerHTML]="item.outerHTML | safeHtml" ></div> <!-- display html element -->
</ng-container>
,
此解决方案的最佳方法是使用所创建元素的 outerHTML
属性。然后使用管道在 HTML 组件中对其进行清理。
// .component.ts
export class AppComponent implements OnInit {
name = "Angular " + VERSION.major;
tableKey: any[];
ngOnInit() {
let parentDiv1 = document.createElement("div");
parentDiv1.className = "div";
parentDiv1.textContent = "Random Inner Text";
let cb1 = document.createElement("input");
cb1.type = "checkbox";
cb1.className = "check-box";
parentDiv1.appendChild(cb1);
this.tableKey = [
"Random 1","Random 2","Random 3","Random 4","Random 5","Random 6","Random 7","Random 8"
];
}
}
// .pipe.ts
import {
Pipe,PipeTransform
} from "@angular/core";
import {
DomSanitizer
} from "@angular/platform-browser";
@Pipe({
name: 'safeHtml'
})
export class SafeHtmlPipe implements PipeTransform {
constructor(private sanitized: DomSanitizer) {}
transform(value: string) {
return this.sanitized.bypassSecurityTrustHtml(value);
}
}
<div class="container">
<div *ngFor="let item of tableKey" [innerHTML]="item | safeHTML">
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。