如何使用 ts 中的变量作为 HTML 文件中的标记名？ [复制]

我想知道是否有什么方法可以使用HTML tag name (<p> for e.g.)这是从变量获得的？

以下是我尝试过的代码：

应用程序组件.ts

import { Component,OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  name = 'Angular';
  somevalues = [1, 2, 3, 4, 5]
  tagName;
  getFromCharCode(index) {
    return String.fromCharCode('A'.charCodeAt(0) + index);
  }
  ngOnInit(){
    this.tagName = "p";
  }
}

应用程序组件.html

<div *ngFor="let x of somevalues; let i = index">
  {{x}} - {{i}}
  {{ getFromCharCode(i) }}
  <h1>{{tagName}}
  </h1>
</div>

如果我尝试像：

<{{tagName}}></{{tagName}}>

我收到类似的错误

模板解析错误： 意外的结束标记“{{tagName}}”。当标签已被另一个标签关闭时，可能会发生这种情况。

我提到this https://stackoverflow.com/questions/20265593/angular-how-can-i-use-variable-in-tagname，但我发现对于简单的替换来说相当复杂。还有其他方法可以实现这一目标吗？

编辑1： 许多人建议使用innerHTML，但如果内容较小，这也是可行的。在我的典型情况下，我希望将所有 html 内容放在同一个文件中，然后我会得到only中的标签名称ts file

您可以使用内部HTML为了这：

ngOnInit(){
  this.tagName = "<p></p>";
}

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