使用*ngFor向DOM添加字符串数组和HtmlLevel

我有这样的布局要求

我想用CSS

display:grid
someFunction（数据）{
这个数据=数据；
让parentDiv1=document.createElement（'div'）；
parentDiv1.className='div'；
parentDiv1.textContent='随机内部文本'；
设cb1=document.createElement（'input'）；
cb1.type='复选框'；
cb1.className='复选框'；
父母1.子女（cb1）；
this.tableKey=[
'',
`Text:${this.data.someRandomText1}`，
`Text:${this.data.someRandomText2}`，
`Text:${this.data.someRandomText3}`，
`Text:${this.data.someRandomText4}`，
`Text:${this.data.someRandomText5}`，
家长组1，
`Text:${this.data.someRandomText6}`，
`Text:${this.data.someRandomText7}`，
`Text:${this.data.someRandomText8}`，
家长组1
];
}

方法#1

可以使用html元素的
outerHTML
属性，使数组仅包含字符串，然后在模板中清理这些字符串，以便显示html

组件技术

component.html

component.html



请参见
此解决方案的最佳方法是使用所创建元素的
outerHTML
属性。然后使用管道在HTML组件中对其进行清理


/.component.ts
导出类AppComponent实现OnInit{
name=“Angular”+VERSION.major；
tableKey:any[]；
恩戈尼尼特（）{
让parentDiv1=document.createElement（“div”）；
parentDiv1.className=“div”；
parentDiv1.textContent=“随机内部文本”；
设cb1=document.createElement（“输入”）；
cb1.type=“复选框”；
cb1.className=“复选框”；
父母1.子女（cb1）；
this.tableKey=[
“随机1号”，
“随机2”，
“随机3”，
“随机4”，
“随机5”，
“随机6”，
parentDiv1.outerHTML，
“随机7”，
“随机8”
];
}
}
//.pipe.ts
进口{
管
管道变换
}从“@角度/核心”；
进口{
消毒液
}从“@角度/平台浏览器”；
@烟斗({
名称：'safeHtml'
})
导出类SafeHtmlPipe实现PipeTransform{
构造函数（私有消毒：domsanizizer）{}
转换（值：字符串）{
返回此.sanitized.bypassSecurityTrustHtml（值）；
}
}

您可以在这里共享数据吗。数据只是一个字符串数组
data=[]
您需要更新数据集并实现它。例如，您的tableKey将是object数组。我已经更改了您的数据类型并实现了if-else逻辑是的，这是一个解决方案，但我正在寻找一种方法，将
字符串数组| HTMLElement
从
.component.ts
传递到
.component.html
，所以基本上您只是复制了我的答案？不完全是这样。我的意思是有相似之处，但这是一个非常常见的解决方案。它与我24小时前发布的stackblitz有什么不同？这是完全相同的代码该代码与@naman发布的代码类似，我对该代码进行了更改。唯一的更改是添加缺少的管道（我已经这样做了）和添加
parentDiv1.outerHTML
，我已经这样做了。祝您今天过得愉快
this.tableKey = ["text1", "text2", 
  parentDiv1.outerHTML, //Convert html element to string

<div *ngFor="let item of tableKey" [innerHTML]="item | safeHtml ">

this.tableKey = ["text1", "text2", 
  parentDiv1, //array of mixed elements

// ...
public isString(value: any)
{
  return typeof(value) ==='string';
}

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